Question

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

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

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>

如何使用js

1 个答案: