Question

任何人都可以提供一些见解，我将如何计算两个滑块范围作为一个？如果最大范围是100并且用户将滑块1移动到30，则滑块2应移动到70.总值将始终是范围。设置相同的class我认为是需要的，但我知道它远不止于此。

这是jquery滑块http://loopj.com/jquery-simple-slider/

<input type="text" data-slider="true" value="0.8" data-slider-range="01,100" data-slider-step="0.2" data-slider-highlight="true">
<input type="text" data-slider="true" value="0.8" data-slider-range="01,100" data-slider-step="0.2" data-slider-highlight="true">


  <script>
  $("[data-slider]")
    .each(function () {
      var input = $(this);
      $("<span>")
        .addClass("output")
        .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
      $(this)
        .nextAll(".output:first")
          .html(data.value.toFixed(2));
    });
  </script>

Answer 1

我希望这会有所帮助。

<input id="slider-2" type="text" data-slider="true" data-slider-range="1,99">
<input id="slider-1" type="text" value="99" data-slider="true" data-slider-range="1,99">


var total = 100;

$("#slider-1").bind("slider:changed", function (event, data) {
      $('#slider-2').simpleSlider("setValue", total - data.value);
    console.log(event);
});

$("#slider-2").bind("slider:changed", function (event, data) {
      $('#slider-1').simpleSlider("setValue", total - data.value);
});

DEMO

jQuery Dual滑块同时移动

1 个答案: