Linked multiple Jquery sliders

How do you change the value of one Jquery slider to mirror the value of anoth开发者_StackOverflower slider.

ie. If I have one slider with a range, I want to take the end value and use it for the start value of another range slider. I also want them to animate together on change , so they look like they're linked together

---

If you are using the jQuery UI slider, you can have one slider mirror another slider by relying on the slide event.

Since you asked two questions in your question, let's handle the first (sliders mirroring each other).

First, create your two sliders, like this.

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        // TODO - Respond to slide event.
    }
});

And, of course, add the appropriate HTML.

<div id="slider1" style="width:100px"></div>
<div id="slider2" style="width:100px"></div>

This will setup your sliders. Now you have to have to implement the slide event so that the OTHER slider is updated when the slider is updated. Here is now to do it.

$("#slider1").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider2').slider("option", "value", ui.value);
    }
});

$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $('#slider1').slider("option", "value", ui.value);
    }
});

Note the work going on inside the slide function.

As to the second part of your question (take the end value and use it as the start value of another slider), you'll want to set that in the min and max values (make the second start at the end of the first slider's max value). Then, the only other change you have to make is adding the difference in values to the ui.value in the slide function. Here is an example of the JavaScript that you'll need.

var diff = 100;
$("#slider1").slider({
    min: diff - diff,
    max: diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value);
        $("#amount2").val(ui.value + diff);
        $('#slider2').slider("option", "value", ui.value + diff);
    }
});
$("#amount1").val($("#slider1").slider("value"));

$("#slider2").slider({
    min: diff,
    max: diff + diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value - diff);
        $("#amount2").val(ui.value);
        $('#slider1').slider("option", "value", ui.value - diff);
    }
});
$("#amount2").val($("#slider2").slider("value"));

You can change the diff value to change the differences between the bars. I also included a display of the current value so you can see that this is indeed working. You can see this example at this jsFiddle example. Hope this helps you out.