Как переместить обе ручки в JQuery UI Range Slider - PullRequest
Новая
       38

Как переместить обе ручки в JQuery UI Range Slider

2 голосов
/ 06 марта 2012

Я пытаюсь сделать слайдер диапазона, используя пользовательский интерфейс jQuery 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));

}

1 Ответ

0 голосов
/ 25 мая 2018

Прошли годы с тех пор, как этот вопрос возник здесь, но я сталкивался с этим вопросом, пытаясь сделать очень похожую вещь.Закончив, я решил настроить свое решение для текущего вопроса и опубликовать его.

Вы можете увидеть его в действии на 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>
...