两个滑动条同时移动

Question

谁能提供一些见解，我将如何能够计数两个滑块范围作为一个?如果最大范围是100，用户将滑块1移动到30，那么滑块2应该移动到70。总价值总是等于值域。我认为需要为两者设置相同的class，但我知道它远不止于此。

my setup 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>

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);
});

演示