2

我正在尝试使用 jQuery 的 UI Slider 制作一个范围滑块，我想知道如何让两个旋钮一起移动。例如，我的最小值为 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));

}

4

1 回答 1

1

自从这个问题出现以来已经有好几年了，但是我在尝试做非常相似的事情时遇到了这个问题。完成后，我想我会针对当前问题调整我的解决方案，然后发布它。

您可以在 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>

于 2018-05-25T16:50:22.030 回答