Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 2918

Feb 16th, 2011

Multiple handles in a jQuery Range slider

Expand Post »

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$(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 ) );
	});
$(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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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!

Similar Threads

jquery datepicker range validation in JavaScript / DHTML / AJAX
Hand cursor in IE6 in HTML and CSS
showing hiding multiple with php jquery in PHP
Facebook presence bar code help in HTML and CSS

vigneshd90

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Feb 2011

Permalink

Feb 17th, 2011

Re: Multiple handles in a jQuery Range slider

Vignesh,

Making multiple handles is easy :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$(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(" - ")
	);
});
$(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

Last edited by Airshow; Feb 17th, 2011 at 3:36 pm.

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,530 posts
since Apr 2009

Permalink

Feb 18th, 2011

Re: Multiple handles in a jQuery Range slider

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!

vigneshd90

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Feb 2011

Permalink

Dec 21st, 2011

preventing overlap

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$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;
                    	}
 
                    }
		}
	});
$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;
                    	}

                    }
		}
	});

_superted

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Dec 2011

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: options and buttons not quite working correctly in jquery

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Tablesorter jQuery Plugin - a fix

DaniWeb Message

Cancel Changes

User Name
Password