Opened 14 years ago

Closed 14 years ago

Last modified 13 years ago

#2332 closed bug (fixed)

[jQueryUI] Slider with multiple handlers bug

Reported by: alexo Owned by: eduardo
Priority: major Milestone: 1.5
Component: ui.core 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! Alex.

Change History (10)

comment:1 Changed 14 years ago by paul

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) else $('.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.

comment:2 Changed 14 years ago by alexo

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?

comment:3 Changed 14 years ago by alexo

Resolution: wontfix
Status: closedreopened

comment:4 Changed 14 years ago by alexo

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

comment:5 Changed 14 years ago by paul

Owner: changed from paul to braeker
Status: reopenednew

comment:6 Changed 14 years ago by alexo

I also have a request and a question.

Request: 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]); 

Question In the following code:

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

What is the purpose of the plugins property?

Thank you! Alex Objelean

comment:7 Changed 14 years ago by joern

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

comment:8 Changed 14 years ago by joern

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.

comment:9 Changed 13 years ago by (none)

Milestone: 1.2.4

Milestone 1.2.4 deleted

comment:10 Changed 13 years ago by paul

Milestone: 1.5
Note: See TracTickets for help on using tickets.