jquery range slider: set max of slider 1 to min of slider 2

Question

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:

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 lock the min value of slider 1 to 0.

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

score 4 · Accepted Answer · answered Dec 19 '11 at 21:49

Here is working fiddle:

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

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.

jquery range slider: set max of slider 1 to min of slider 2

1 Answers1