Skip to main content

Search and Top Navigation

#5913 closed bug (notabug)

Opened August 09, 2010 07:02AM UTC

Closed August 09, 2010 08:44AM UTC

Last modified October 11, 2012 09:15PM UTC

Invalid Range Values

Reported by: Yojance Owned by:
Priority: critical Milestone:
Component: ui.slider Version: 1.8.3
Keywords: Cc:
Blocked by: Blocking:

The slider doesn't show the right values when I try to access them.

To view the odd behavior, please take a look at this DEMO:

  • The slider starts on the right side and have a value of 255 when it begins. If you slide the handle to the left, and return it to the right, it won't show the value 255. The values are inconsistent, showing 254, 253 and others sometimes.
  • If the slider is moved very slow to the left side, after doing the above steps, the slider will change to 255, instead of decrementing.

Other odd behaviors:

  • When the slider is dragged to the left completely, the value of 0 is never selected, it ranges from 1-5 but never ZERO.
  • When clicking on the slider handle, the handle moves to the left a number of random pixels. If you continue to click on the handle without dragging it, it keeps moving to the left, decrementing by the same value at which it first moved.

For example, if it was at 249 and you click it, it goes to 245, decrementing by 4. If you continue to click on it, it keeps going down like 241, 237, 233,229.

Finally, when you have reached a high value on the right side, like 254, and you move another handle, the one that is close to it's max value will snap to 255 immediately.

I tried this in the latest versions of IE, Chrome, Opera and Safari.

The code I'm using for this is:

$(document).ready(function() {
	var r = 255;
	var g = 255;
	var b = 255;
	var color;
	var options = {
		animate: true,
		'min': '0',
		'max': '255',
		'value': '255',
		slide: function(event, ui) {
			r = $('#rSlider').slider('value');
			g = $('#gSlider').slider('value');
			b = $('#bSlider').slider('value');
			color = 'rgb(' + r + ',' + g + ',' + b + ')';
			$('#colorBox').css({backgroundColor : color});
	$('#rSlider, #gSlider, #bSlider').slider(options);
Attachments (0)
Change History (2)

Changed August 09, 2010 08:44AM UTC by rdworth comment:1

resolution: → invalid
status: newclosed

This is as designed. You want to use ui.value instead. See


This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

Return false in order to prevent a slide, based on ui.value.


.slider('value') returns the last set value while ui.value contains the next proposed value. This allows you to compare the two and conditionally return false to prevent the slider from going to that value.

In the future, please ask first on the Using jQuery UI Forum:

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:2

milestone: TBD

Milestone TBD deleted