Opened 11 years ago

Closed 11 years ago

Last modified 9 years ago

#5913 closed bug (notabug)

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);

Change History (2)

comment:1 Changed 11 years ago by rdworth

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:

comment:2 Changed 9 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.