Jquery range slider: set maximum slider 1 - min slider 2

Question

I have a page with 4 jQuery sliders that sent ranges. I want the sliders to update each other as follows: the value selected for the maximum of the slider # 1 automatically becomes the minimum for the slider # 2, the maximum slider # 2 automatically becomes the minimum for the slider No. 3, etc. here is what i still have:

http://jsfiddle.net/8xVWY/1/

$(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 block the min value for the slider 1 to 0.

I guess another question, if this is even the best way to do this?

Answer 1

The fiddle works here:

http://jsfiddle.net/8xVWY/13/

Some useful tips:

• If you want to fix the minimum of the jQuery UI range slider, mark its "range" attribute as "min".

 $( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 100 }); 

• The stop event is fired whenever the user stops.
• You can change the value of the slider by the parameters and parameters

 //getter var value = $( ".selector" ).slider( "option", "value" ); //setter $( ".selector" ).slider( "option", "value", 37 ); 

• You can change the minimum of the slider using the "min" parameter

 //getter var min = $( ".selector" ).slider( "option", "min" ); //setter $( ".selector" ).slider( "option", "min", -7 ); 

PS: I only recorded the action of the first slider, and did not duplicate myself. The rest is copying - pasting.