javascript - 如何使用 js 更改 jquery 滑块值

Question

我有几个带有“from”和“to”值的滑块。每个滑块的“从”值基于前一个滑块的“到”值。我的滑块有问题。当我滑动“to”值时，“from”值会跳到开头，为 0。我试图像这样修复它：

$("#slider-range-two").slider({
        range: true,
        min: 0,
        max: 1000,
        step: 1,
        values: [0, 1000],
        slide: function (event, ui) {
            $('#slider-range-two').slider('option', 'values', '[' + leftValue +', 1000]');
        }
    });

我想在用户拖动时更改滑块的值，但这不起作用。我该如何解决？

标签： javascriptjquery

Answer 1

根据我对您问题的理解，在下面提供了带有解决方案的代码段。让我纠正一下，如果您的要求不同，我可以提供必要的解决方案。

var handleOne = $( "#custom-handle1" );
var handleTwo = $( "#custom-handle2" );
var handleThree = $( "#custom-handle3" );

handleOne.slider({
  range: true,
  min: 0,
  max: 1000,
  step: 1,
  values: [20, 300],
  slide: function(event, ui) {
    handleTwo.slider('values', 0, ui.values[ 1 ]);
  }
});

handleTwo.slider({
  range: true,
  min: 0,
  max: 1000,
  step: 1,
  values: [0, 1000],
  slide: function(event, ui) {
    handleThree.slider('values', 0, ui.values[ 1 ]);
  }
});

handleThree.slider({
  range: true,
  min: 0,
  max: 1000,
  step: 1,
  values: [0, 1000]
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<p> First Slider </p>
<div id="slider-range-one">
  <div id="custom-handle1" class="ui-slider-handle"></div>
</div>
 
 <p> Second Slider </p>
 <div id="slider-range-two">
  <div id="custom-handle2" class="ui-slider-handle"></div>
</div>

<p> Third Slider </p>
 <div id="slider-range-three">
  <div id="custom-handle3" class="ui-slider-handle"></div>
</div>