Opened 11 years ago

Closed 7 years ago

Last modified 6 years ago

#3467 closed bug (fixed)

Sliders Handles can overlap, only small sliver of slider is selectable

Reported by: aubreya Owned by:
Priority: major Milestone: 1.10.0
Component: ui.slider Version: 1.6rc2
Keywords: haspatch Cc:
Blocked by: Blocking:

Description (last modified by paul)

There really isn't a user experience benefit of letting sliders overlap. The right side of the left slider should not be able to be dragged past the left side of the right slider.

You must subtract the pixels that each handle occupies on the slider, as that space really isn't part of the slider. 50% for the right slider would be exactly 1 slider width off from 50% of the left slider. This way, if you wanted to select exactly 50% then the two sliders would be next to each other, not over the top of each other.

This is a much better user experience and is the way sliders in every other slider example I can find work.

Example: http://developer.yahoo.com/yui/examples/slider/slider_dual_with_highlight.html

Note that the left slider can never ever even slightly overlap the right slider.

Attachments (1)

slider.patch (5.3 KB) - added by ahuseynov 10 years ago.
fixed slider patch

Download all attachments as: .zip

Change History (23)

comment:1 Changed 11 years ago by aubrey

Any progress on this?

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

Description: modified (diff)
Milestone: TBD1.6
Priority: minorcritical

Related to #3736.

comment:3 Changed 11 years ago by paul

Description: modified (diff)
Owner: paul deleted
Status: newassigned

comment:4 Changed 11 years ago by paul

Milestone: 1.61.next

comment:5 Changed 10 years ago by rdworth

Milestone: 1.next1.8

comment:6 Changed 10 years ago by ahuseynov

I attached a patch that implements users suggestion. It also happens to fix bug #4467. I also noticed another bug where both handles are positioned somewhere in the center at the same value, and mouse is clicked to the right of the handles. In that case nothing happened.

Changed 10 years ago by ahuseynov

Attachment: slider.patch added

fixed slider patch

comment:7 Changed 10 years ago by ahuseynov

I just updated patch file. Old one included last minute fix which was not quite right. Hopefully this one is better.

comment:8 Changed 10 years ago by Jörn Zaefferer

Not letting them overlap is one approach, but has its drawbacks. Determining the handle to drag based on the initial drag direction is an alternative, which was discussed here: http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/9616d505e8468009

comment:9 Changed 10 years ago by petersendidit

Here is a patch file that handles when the handles get stacked http://dl.dropbox.com/u/144970/stackedHandles.diff (got an error from trac when tried to upload the patch file)

comment:10 Changed 9 years ago by petersendidit

Committed a fix for this at goes along with the discussion in the google group thread. http://github.com/petersendidit/jquery-ui/commit/f0432c03bfbe6baacf965711d905e98cae219fab

comment:11 Changed 9 years ago by chadn

Hmm.. none of these patches seem to fully address the original bug. Here's a patch for making the sliders not overlap, using the method proposed in the original bug http://github.com/chadn/jquery-ui/commit/3f4c5bcf05fbf4d182c89f84f670384222150d89

Here's examples of how it works - handles not overlapping vs. original handles overlap. http://chadnorwood.com/code/slider-fix.html

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

Priority: criticalmajor

comment:13 Changed 9 years ago by ednark

I think I have some smarter selection logic for choosing which handle to move.

Commit https://github.com/ednark/jquery-ui/commit/7b80caa880038b9fedfc5d15b7d6209f904379f6

comment:14 Changed 7 years ago by eirc

The handle that will get selected on click should also be given a higher z-index before clicking so that it is the one visible, in case the two handles are styled differently.

http://jsfiddle.net/eirc/J3aRt/

comment:15 Changed 7 years ago by jpka

This is an updated implementation from the solution provided above by ednark, which I think is the best for this issue. It consists in choosing the right handle on mouse drag rather that on click, so it will choose the right one when you drag away from the overlapping handles. Slider overlapping is necessary to visually comprehend that the min and max values are the same (and the slider should allow those values to be the same, there are use cases for it) and so this is the most reasonable solution.

Commit: https://github.com/jpka/jquery-ui/commit/95ad345f08bd883a1f1836958ade96fe72146cae

comment:16 Changed 7 years ago by Scott González

Milestone: 1.9.01.11.0

comment:17 Changed 7 years ago by petersendidit

#8561 is a duplicate of this ticket.

comment:18 Changed 7 years ago by mikesherov

Keywords: haspatch added
Status: assignedopen

comment:19 Changed 7 years ago by Juan Pablo Kaniefsky

Resolution: fixed
Status: openclosed

Slider: when handles overlap, clicking and dragging will now pick the last one that was moved. Fixed #3467 - Sliders Handles can overlap, only small sliver of slider is selectable

Changeset: a18863205e060bf9a145bb5ed90e36d8feb3c8f7

comment:20 Changed 7 years ago by mikesherov

Milestone: 1.11.01.10.0

comment:21 Changed 6 years ago by BrenBarn

This bug is not fixed. The issue is not just the need to be able to drag in either direction. What's also important is the ability to have a VISUAL separation between the two slider handles, even when they are representing the same number. If I have a range slider with the max and min both set to 10, I should be able to make it so that the two handles do not overlap at all. There should be a slider option called something like "minDistance" that specifies the minimum visual distance between the two handles.

comment:22 in reply to:  21 Changed 6 years ago by tj.vantoll

Replying to BrenBarn:

This bug is not fixed. The issue is not just the need to be able to drag in either direction. What's also important is the ability to have a VISUAL separation between the two slider handles, even when they are representing the same number. If I have a range slider with the max and min both set to 10, I should be able to make it so that the two handles do not overlap at all. There should be a slider option called something like "minDistance" that specifies the minimum visual distance between the two handles.

You can implement the distance using the current APIs pretty easily: http://jsfiddle.net/tj_vantoll/7r5qS/. Having the handles a distance apart and representing the same values seems very strange to me. If you're interested in such behavior you should write it as an extension.

Note: See TracTickets for help on using tickets.