2

I am trying to make a range slider using jQuery's UI Slider and i was wondering how i could make the two knobs to move together. For example i have minimum value at 0 and maximum at 100 the total value of these two must not be more than 60 so if the first knob is at 10 the other can go till 70 . No here is the problem how we could move the second knob to go lets say to 80 and the forst knob to go at 20 so by dragging the second knob i would move the first keeping their distance.

Thank you very much 

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));

}

mike
  • 21
  • 1
  • 5

1 Answers1

1

It's been years since this question went in here, but I came across this question while attempting to do a very similar thing. Having finished it, I figured I'd tweak my solution for the current question, and post it.

You can see it in action over on CODEPEN, but for convenience, I've also added the code below:

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>
yodarunamok
  • 441
  • 5
  • 9