javascript - 如何在jQuery UI范围滑块中移动两个旋钮

我正在尝试使用jQuery的UI滑块制作范围滑块，我想知道如何使两个旋钮一起移动。
例如，我的最小值为0，最大值为100，这两个值的总和不得超过60，因此，如果第一个旋钮为10，则另一个旋钮可以达到70。
这里没有问题，我们如何才能使第二个旋钮移动到80，而第一个旋钮移动到20，所以通过拖动第二个旋钮，我将移动第一个旋钮保持其距离。

非常感谢你

function generate_slider(video_duration) {
 start_duration = 0
 end_duration = 60

if(video_duration < 60){
    end_duration = video_duration;

}

$("#slider-range").slider({
    range: true,
    min: 0,
    max: video_duration,
    values: [start_duration, end_duration],
    slide: function (event, ui) {
    total_duration = (ui.values[1] - ui.values[0])

        if (total_duration > 60) {

            return false;

        } else {

            $("#amount").val("From: " + ui.values[0] + "sec" + " - To: " + ui.values[1] + "sec");
            $("#total_amount").val("Selected:" + total_duration + " out of " + video_duration + " Sec");
        }
        $("#" + prefix + "hdn_duration").val(video_duration);
        $("#" + prefix + "hdn_duration_total").val(total_duration);
        $("#" + prefix + "hdn_duration_from").val(ui.values[0]);
        $("#" + prefix + "hdn_duration_to").val(ui.values[1]);
    }
});
$("#amount").val("From: " + $("#slider-range").slider("values", 0) + "sec" + " - To: " + $("#slider-range").slider("values", 1) + "sec" );
$("#total_amount").val("Selected:" + ($("#slider-range").slider("values", 1) - $("#slider-range").slider("values", 0)) + " out of " + video_duration + " Sec");
$("#" + prefix + "hdn_duration").val(video_duration);
$("#" + prefix + "hdn_duration_total").val($("#slider-range").slider("values", 1) - $("#slider-range").slider("values", 0));
$("#" + prefix + "hdn_duration_from").val($("#slider-range").slider("values", 0));
$("#" + prefix + "hdn_duration_to").val($("#slider-range").slider("values", 1));

}

最佳答案

这个问题进入这里已经有好几年了，但是我在尝试做一个非常相似的事情时遇到了这个问题。完成后，我想针对当前问题调整解决方案，然后发布。

您可以在操作over on CODEPEN中看到它，但是为了方便起见，我还添加了以下代码：

var myS = $("#slider");
var minIn = $("#min");
var maxIn = $("#max");
var maxR = 60;
var startMin = 0;
var startMax = 29;

minIn.val(startMin);
maxIn.val(startMax);
myS.slider({
  min: 0,
  max: 100,
  range: true,
  values: [startMin, startMax],
  slide: function(event, ui) {
    // at maximum range, the two handles should slide together
    if ((myS.slider("values", 1) - myS.slider("values", 0)) >= maxR) {
      if (ui.handleIndex === 0) {
        myS.slider("values", 1, Math.min(ui.value + maxR, 100));
      } else {
        myS.slider("values", 0, Math.max(ui.value - maxR, 0));
      }
    }
    changeInputs(ui);
  }
});

function changeInputs(ui) {
  // to get an accurate value for the current handle, get it from the ui
  if (ui.handleIndex === 0) {
    minVal = ui.value;
    maxVal = myS.slider("values", 1);
  } else {
    minVal = myS.slider("values", 0);
    maxVal = ui.value;
  }
  minIn.val(minVal);
  maxIn.val(maxVal);
}

.container {
  width: 50%;
  margin: 0 auto;
}

#slider {
  margin: 15px;
}

input {
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/humanity/jquery-ui.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container">
  <div class="container">
    <input type="text" id="min"> to
    <input type="text" id="max">
  </div>
  <div id="slider"></div>
</div>