Search and Top Navigation
#3467 closed bug (fixed)
Opened September 26, 2008 05:49PM UTC
Closed November 16, 2012 02:39PM UTC
Last modified July 15, 2013 12:57PM UTC
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
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 (22)
Changed October 27, 2008 09:06PM UTC by comment:1
Changed January 04, 2009 04:03AM UTC by comment:2
| description: | \ \ 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. \ → \ 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. \ |
|---|---|
| milestone: | TBD → 1.6 |
| priority: | minor → critical |
Related to #3736.
Changed January 27, 2009 02:59PM UTC by comment:3
| description: | \ 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. \ → 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. \ |
|---|---|
| owner: | paul |
| status: | new → assigned |
Changed January 28, 2009 10:36PM UTC by comment:4
| milestone: | 1.6 → 1.next |
|---|
Changed May 15, 2009 01:53AM UTC by comment:5
| milestone: | 1.next → 1.8 |
|---|
Changed May 24, 2009 08:31PM UTC by comment:6
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 May 24, 2009 09:09PM UTC by comment:7
I just updated patch file. Old one included last minute fix which was not quite right. Hopefully this one is better.
Changed August 23, 2009 04:02PM UTC by comment:8
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
Changed March 01, 2010 11:37PM UTC by comment:9
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)
Changed March 24, 2010 12:06PM UTC by comment:10
Committed a fix for this at goes along with the discussion in the google group thread. http://github.com/petersendidit/jquery-ui/commit/f0432c03bfbe6baacf965711d905e98cae219fab
Changed June 20, 2010 05:13PM UTC by comment:11
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.
Changed October 19, 2010 03:44PM UTC by comment:12
| priority: | critical → major |
|---|
Changed February 10, 2011 03:14AM UTC by comment:13
I think I have some smarter selection logic for choosing which handle to move.
Commit https://github.com/ednark/jquery-ui/commit/7b80caa880038b9fedfc5d15b7d6209f904379f6
Changed April 17, 2012 01:54PM UTC by comment:14
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.
Changed May 17, 2012 03:53AM UTC by comment:15
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
Changed October 11, 2012 02:53PM UTC by comment:16
| milestone: | 1.9.0 → 1.11.0 |
|---|
Changed October 16, 2012 07:19PM UTC by comment:17
#8561 is a duplicate of this ticket.
Changed October 19, 2012 05:58PM UTC by comment:18
| keywords: | → haspatch |
|---|---|
| status: | assigned → open |
Changed November 16, 2012 02:39PM UTC by comment:19
| 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
Changed November 16, 2012 02:39PM UTC by comment:20
| milestone: | 1.11.0 → 1.10.0 |
|---|
Changed July 14, 2013 08:36PM UTC by comment:21
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.
Changed July 15, 2013 12:57PM UTC by comment:22
Replying to [comment:21 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?