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 bees the min for slider #2, the max of slider #2 automatically bees 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?

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 bees the min for slider #2, the max of slider #2 automatically bees the min for slider #3 and so on. here is what i have so far:

http://jsfiddle/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?

• javascript
• jquery
• jquery-ui
• jquery-ui-slider

Share Improve this question Follow edited Dec 19, 2011 at 15:40 Reporter 3,93655 gold badges3535 silver badges4949 bronze badges asked Dec 19, 2011 at 15:37 AdunahayAdunahay 1,62111 gold badge1414 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is working fiddle:

http://jsfiddle/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.