jquery range slider: set max of slider 1 to min of slider 2
11,188
Here is working fiddle:
A couple of useful tips:
- If you want to fix minimum of a range slider of jQuery UI, mark its "range" attribute as "min".
$( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 100 });
- stop event is fired whenever user stops sliding
- You can change value of a slider by "option" and "values" parameters
//getter var value = $( ".selector" ).slider( "option", "value" ); //setter $( ".selector" ).slider( "option", "value", 37 );
- You can change minimum of a slider by "min" parameter
//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.
Related videos on Youtube
Author by
Adunahay
Updated on May 27, 2022Comments
-
Adunahay about 2 years
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?