Question

所以基本上我试图实现这个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">→</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

我尝试了代码，但当我发出警告时，这部分功能不起作用（我正在使用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]);

});

Answer 2

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

https://jqueryui.com/slider/

Bootstrap滑块范围值文本框

2 个答案: