如何使用js

时间:2018-06-01 11:02:25

标签: javascript jquery

我有几个滑块与"来自"和"到"值。每个滑块"来自"值基于之前的滑块"到"值。我的滑块有问题。当我将"滑到"价值,"来自"值跳到开头,为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]');
        }
    });

我想在用户拖动时更改滑块的值,但这不起作用。我该如何解决这个问题?

1 个答案:

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