Bootstrap 滑块范围值文本框

Question

所以基本上我试图实现这个 jsfiddle 中的内容： http://jsfiddle.net/FPCRb/ 有一个数值范围的滑动条和两个文本框。

这是我的 HTML table:

<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">→</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());
     });
 });

我需要能够在文本框中指定值并使用滑块以及重置按钮。

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

Answer 1

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

https://jqueryui.com/slider/

Answer 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]);

});

Bootstrap 滑块范围值文本框

Bootstrap slider range value text boxes

html

jquery

slider

twitter-bootstrap

bootstrap-slider