0

所以基本上我试图实现这个 jsfiddle 中的内容：http: //jsfiddle.net/FPCRb/ 有一个用于一系列值的滑块和两个文本框。

这是我的 HTML 表格：

<table class="table borderless">
    <thead>
      <tr>
        <th>Rank</th>
        <th>+/-</th>
        <th>Searches</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="radio" name="optradio" class="custom"> ALL</td>
        <td><input type="radio" name="optradio2" class="custom2"> ALL</td>
        <td><input id="slider" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
        <td><button id="reset" type="button" class="btn btn-success">Reset</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
        <td><input type="checkbox" class="custom-selector2"> Up</td>

        <td><input type="text" class="form-control form-inline col-xs-1 sliderValue" style="width: 60px" placeholder="From"  data-index="0" value="10">
          <label class="col-xs-1" style="font-size: 22px">→&lt;/label>
          <input type="text" class="form-control form-inline col-xs-1 sliderValue" style="width: 60px" placeholder="To"  data-index="1" value="90"></td>
      </tr>

      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
        <td><input type="checkbox" class="custom-selector2"> Down</td>
        <td><button id="reset" type="button" class="btn btn-info">Set interval</button></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
        <td><input type="checkbox" class="custom-selector2"> No movement</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Not in top 100</td>
      </tr>
    </tbody>
  </table>

这是我的脚本：

 $(document).ready(function() {
     $("#slider").slider({
         min: 0,
         max: 1000,
         step: 1,
         range: true,
         values: [10, 90],
         tooltip: 'always',
         slide: function(event, ui) {
             for (var i = 0; i < ui.values.length; ++i) {
                 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
             }
         }
     });

     $("input.sliderValue").change(function() {
         var $this = $(this);
         $("#slider").slider("values", $this.data("index"), $this.val());
     });
 });

我需要能够在文本框中指定值并使用滑块以及重置按钮。 在此处输入图像描述

看起来像我想要的那样，但移动滑块不会改变文本框，反之亦然，我错过了什么？

4

2 回答 2

2

我尝试了代码，但是当我发出警报时，这部分不起作用（我正在使用 Firefox）：

slide: function(event, ui) { alert(); // this alert is not show up!!
             for (var i = 0; i < ui.values.length; ++i) {
                 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
             }
         }

所以我改变它。尝试这个。它对我有用：

$("#slider").slider({
    min: 0,
    max: 100,
    step: 1,
    range: true,
    values: [10, 90],
});

$('#slider').on('slide', function (ev) {
   console.log(this.value[0]);
   console.log(this.value[1]);
   $('.sliderValue[data-index="0"]').val(this.value[0]);
   $('.sliderValue[data-index="1"]').val(this.value[1]);

});
于 2017-08-30T10:03:05.473 回答
1

在您链接的 JSFiddle 中，ID 为“slider”的元素是一个空的 div，jQueryUI 正确地填充了自定义滑块标记。但是在您的代码中，元素是一个输入。将其替换为文档中所示的空 div：

https://jqueryui.com/slider/

于 2017-02-03T15:55:58.640 回答