#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 )
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)
Change History (23)
comment:1 Changed 15 years ago by
comment:2 Changed 15 years ago by
Description: | modified (diff) |
---|---|
Milestone: | TBD → 1.6 |
Priority: | minor → critical |
Related to #3736.
comment:3 Changed 15 years ago by
Description: | modified (diff) |
---|---|
Owner: | paul deleted |
Status: | new → assigned |
comment:4 Changed 15 years ago by
Milestone: | 1.6 → 1.next |
---|
comment:5 Changed 14 years ago by
Milestone: | 1.next → 1.8 |
---|
comment:6 Changed 14 years ago by
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.
comment:7 Changed 14 years ago by
I just updated patch file. Old one included last minute fix which was not quite right. Hopefully this one is better.
comment:8 Changed 14 years ago by
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 14 years ago by
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 14 years ago by
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 13 years ago by
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 13 years ago by
Priority: | critical → major |
---|
comment:13 Changed 13 years ago by
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 11 years ago by
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.
comment:15 Changed 11 years ago by
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 11 years ago by
Milestone: | 1.9.0 → 1.11.0 |
---|
comment:18 Changed 11 years ago by
Keywords: | haspatch added |
---|---|
Status: | assigned → open |
comment:19 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
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 11 years ago by
Milestone: | 1.11.0 → 1.10.0 |
---|
comment:21 follow-up: 22 Changed 10 years ago by
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 Changed 10 years ago by
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.
Any progress on this?