Multiple handles in a jQuery Range slider

[vigneshd90]

I need to use jQuery range slider for setting up limits for multiple ranges which are interdependent, something that is similar to slider that we use for hard disk space allocation during OS installation but mine is a web applcation and the data necessary would be fetched from DB. I've tried the following code but I couldn't get two ranges. Only two handles are active.

$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 1000,
			values: [ 75, 300, ],
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
			" - $" + $( "#slider-range" ).slider( "values", 1 ) );
	});

and

<div class="demo">

<p>
	<label for="amount">Price range:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 20.1%;"></a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 30.1%;"></a>
    <a href="#" class="ui-slider-handle ui-state-disabled ui-corner-all" style="right: 99.5%;"></a>
    <a href="#" class="ui-slider-handle ui-state-disabled ui-state-default ui-corner-all" style="left: 99.5%;"></a>
</div>

</div>

How can i make more handles active in same slider without overlapping them?

Thanks in advance!

[Airshow]

Vignesh,

Making multiple handles is easy :

$(function() {
	$mySlider = $( "#slider-range" );
	$mySlider.slider({
//		range: true,//don't set range
		min: 0,
		max: 1000,
		values: [ 75, 125, 175, 225 ],
		slide: function( evt, ui ) {
			a = [];
			for(var i=0; i<ui.values.length; i++) {
				a.push(ui.values[i]);
			}
			$( "#amount" ).val( "$" + a.join(" - " + "$") );
		}
	});
	$( "#amount" ).val(
	 ["$" + $mySlider.slider("values", 0),
	  "$" + $mySlider.slider("values", 1),
	  "$" + $mySlider.slider("values", 2),
	  "$" + $mySlider.slider("values", 3)].join(" - ")
	);
});

Giving the slider "multi-range" behaviour is not so easy. I played around for a bit a couldn't come up with 100% satisfactory code. The big issue, as you say, is preventing overlap, which would take a bit of development effort and possibly approached in a modified version of "slider", otherwise the interface appears to expose too little of the inner workings.

Another approach (easier/harder?) would be to have a stack of interlinked range-sliders, set up such that the upper handle of each also moves the lower slider of the next range-slider in the stack ..... and vice versa. This would also involve some development effort but would benefit from basic range slider behaviour being already in place.

These are my best thoughts. Nothing more, I'm afriad.

Airshow

[vigneshd90]

Thanks for the help! If you come to know about the range as well, do post about it! I'll try to find and post as well! Thanks again!

[_superted]

Here's a little bit of code to prevent overlap in the above example

$mySlider.slider({
//		range: true,//don't set range
		min: 0,
		max: 1000,
		values: [ 75, 125, 175, 225 ],
		slide: function( evt, ui ) {
	            for(var i = 0, l = ui.values.length; i < l; i++){
                    	if(i !== l-1 && ui.values[i] > ui.values[i + 1]){
                    		return false;
                    	}
                    	else if(i === 0 && ui.values[i] < ui.values[i - 1]){
                    		return false;
                    	}

                    }
		}
	});