Skip to main content

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)
  • slider.patch (5.3 KB) - added by ahuseynov May 24, 2009 09:08PM UTC.

    fixed slider patch

Change History (22)

Changed October 27, 2008 09:06PM UTC by aubrey comment:1

Any progress on this?

Changed January 04, 2009 04:03AM UTC by scottgonzalez 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: TBD1.6
priority: minorcritical

Related to #3736.

Changed January 27, 2009 02:59PM UTC by paul 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: newassigned

Changed January 28, 2009 10:36PM UTC by paul comment:4

milestone: 1.61.next

Changed May 15, 2009 01:53AM UTC by rdworth comment:5

milestone: 1.next1.8

Changed May 24, 2009 08:31PM UTC by ahuseynov 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 ahuseynov 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 jzaefferer 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 petersendidit 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 petersendidit 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 chadn 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.

http://chadnorwood.com/code/slider-fix.html

Changed October 19, 2010 03:44PM UTC by scottgonzalez comment:12

priority: criticalmajor

Changed February 10, 2011 03:14AM UTC by ednark 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 eirc 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.

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

Changed May 17, 2012 03:53AM UTC by jpka 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 scottgonzalez comment:16

milestone: 1.9.01.11.0

Changed October 16, 2012 07:19PM UTC by petersendidit comment:17

#8561 is a duplicate of this ticket.

Changed October 19, 2012 05:58PM UTC by mikesherov comment:18

keywords: → haspatch
status: assignedopen

Changed November 16, 2012 02:39PM UTC by Juan Pablo Kaniefsky comment:19

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

Changed November 16, 2012 02:39PM UTC by mikesherov comment:20

milestone: 1.11.01.10.0

Changed July 14, 2013 08:36PM UTC by BrenBarn 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 tj.vantoll 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.