Skip to main content

Bug Tracker

Side navigation

#2332 closed bug (fixed)

Opened February 13, 2008 07:38AM UTC

Closed March 17, 2008 03:03PM UTC

Last modified September 26, 2008 12:06AM UTC

[jQueryUI] Slider with multiple handlers bug

Reported by: alexo Owned by: braeker
Priority: major Milestone: 1.2.4
Component: ui Version: 1.2.3
Keywords: Cc:
Blocked by: Blocking:

The bug affects both, 1.0 & 1.5b versions.

This bug can be reproduced even on the demo example. This is the reproduction path:

  • using multiple handles, with range slider, drag both sliders to the right edge. At this point, the handles are blocked and cannot be moved. The workaround would be to change the focus to the min handler, when both handlers are at the right edge.

Thank you!


Attachments (0)
Change History (9)

Changed February 20, 2008 11:05AM UTC by paul comment:1

resolution: → wontfix
status: newclosed

Actually, there is no good fix for this. It's related to the zIndex of the handlers. For example, it won't happen if you move both to the left. If I would 'fix' this issue, it would produce other strange issues.

However, there is an easy workaround:

in the update callback, try the following (provided your maxValue is 200):

if(ui.value = 200)

$('.ui-slider-handle', this).css('zIndex', 2)


$('.ui-slider-handle', this).css('zIndex', 1)

It's untested, but this should set the zIndex of the first handle one up if it's on the right edge, and one down again if not. Try it.

Changed February 21, 2008 03:41PM UTC by alexo comment:2

I think that a workaround can be found. The first thing is on my mind is, for instance, if handlers would not overlap at all. Any thoughts?

Changed February 21, 2008 03:42PM UTC by alexo comment:3

resolution: wontfix
status: closedreopened

Changed February 22, 2008 06:56AM UTC by alexo comment:4

YUI guys have made a nice slider which avoids this bug. A working demo can be found here:

Changed February 28, 2008 10:33AM UTC by paul comment:5

owner: paulbraeker
status: reopenednew

Changed February 28, 2008 03:33PM UTC by alexo comment:6

I also have a request and a question.


If range is true, I should be able to get the current handle values as easy as possible. I thought about something like this:

change: function(e, ui) {
  var arr = ui.instance.getHandleValues();
  console.log("Handle values are:" + arr[0] + ", " + arr[1]); 


In the following code:

$.extend($.ui.slider.prototype, {
  plugins: {},

What is the purpose of the ''plugins'' property?

Thank you!

Alex Objelean

Changed March 14, 2008 01:00PM UTC by joern comment:7

@alexo: Your request should be its own ticket. The plugins-property seems to be a placeholder, it doesn't have any purpose yet.

Changed March 17, 2008 03:03PM UTC by joern comment:8

resolution: → fixed
status: newclosed

Fixed in [5060]. Range handles can't overlap anymore (like the YUI ones), the first handle is always smaller then the second.

Changed September 26, 2008 12:06AM UTC by xmuskrat comment:9 has a patch for this that looks much better then the "now it slightly overlaps" fix.