I have a page with 4 jQuery sliders that sent ranges. I want the sliders to update each other in the following way: the value selected for the max of slider #1 automatically becomes the min for slider #2, the max of slider #2 automatically becomes the min for slider #3 and so on. here is what i have so far:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low" ).val(ui.values[ 1 ].toFixed(2) - .01 );
var high1 = ui.values[ 1 ];
}
});
$( "#slider-range2" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount2" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high2" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low2" ).val(ui.values[ 1 ].toFixed(2) - .01 );
}
});
$( "#slider-range3" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount3" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high3" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low3" ).val(ui.values[ 1 ].toFixed(2) - .01 );
}
});
$( "#slider-range4" ).slider({
range: true,
min: 0,
max: 10000000,
step: 100000,
values: [ 0, 1000000 ],
slide: function( event, ui ) {
$( "#amount4" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
$( "#amount_high4" ).val(ui.values[ 0 ].toFixed(2));
$( "#amount_low4" ).val(ui.values[ 1 ].toFixed(2) - .01 );
}
});
});
I would also like to lock the min value of slider 1 to 0.
I guess another question is if this is even the best way to do this?
Here is working fiddle:
A couple of useful tips:
$( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 100 });
//getter var value = $( ".selector" ).slider( "option", "value" ); //setter $( ".selector" ).slider( "option", "value", 37 );
//getter var min = $( ".selector" ).slider( "option", "min" ); //setter $( ".selector" ).slider( "option", "min", -7 );
P.S: I only fixed action of first slider, not to duplicate myself. The rest is copy - paste.