jQuery Dual滑块同时移动

时间:2014-07-19 02:45:11

标签: jquery jquery-slider

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

我的设置http://testzone.me/ia/price.html

这是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>

1 个答案:

答案 0 :(得分: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