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

[aubreya]

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.

[aubrey]

Any progress on this?

[Scott González]

Related to #3736.

[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.

[ahuseynov]

fixed slider patch

[ahuseynov]

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

[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

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

[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

[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

[ednark]

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

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

[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/

[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

[petersendidit]

#8561 is a duplicate of this ticket.

[Juan Pablo Kaniefsky]

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

[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.

[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.