Skip to main content

Search and Top Navigation

#9553 open bug ()

Opened September 12, 2013 03:05PM UTC

Last modified May 09, 2017 02:31PM UTC

Slider: drag selected instead of closest handle

Reported by: w.pasman Owned by:
Priority: minor Milestone: none
Component: ui.slider Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

I propose that you drag the slider handle that you actually click on, instead of the supposedly nearest handle.

(1) this is more intuitive

(2) when you start adding extra handles that are displaced away from the slider axis, the old code can cause selection of handles that are not even under the mouse. This makes the current approach extremely unintuitive.

'''Make Sure It's a jQuery Bug'''

Go to ​

Slide the left handle under the right handle, so that it is 75% under it.

Click on the LEFT side of the RIGHT handle.

Notice that you selected the LEFT handle even though you clicked on the RIGHT handle.

I consider this a 'bug'. At least, it is unintuitive.

Disable Any Browser Extensions

Reset the browser before running the test. The problem still occurs.

Try a Newer Version

  • I reproduced this problem with jQuery-UI 1.10.
  • I assume that the website above uses the latest JQuery. After all, this is the jquiry UI homepage!

Try an Older Version

  • We had this problem before, with jQuery-UI 1.7.

Reduce, Reduce, Reduce!

  • The webpage demo seems be the bare minimum to reproduce this.

What to Provide

  • The version(s) of the jQuery project that are affected: 1.7 and 1.10 (probably all in between and also before?)
  • The browser (or browsers) that you are able to reproduce the bug in, including version numbers: Safari 5.1.7, Chrome 28.0.1500.71
  • The operating system (or operating systems) you experienced the bug on. OSX 10.6.8

Step-by-step instructions on how to reproduce the issue, including any required system configuration changes: see above

A description of what you expect to happen, and what actually happens: see above.

Ideally, you would also include the following:

A link to a reduced, working demo/test case that will never move (jsFiddle is good for this): see above

Information on other versions tested, including whether or not the issue is reproducible there.

Information on other browsers where the issue does not occur.

A patch (preferably as a link to a GitHub commit or pull request).

I propose to replace this code , line 10535 of jquery-ui-1.10.3.js, widget ui.slider#_mouseCapture

		this.handles.each(function( i ) {
			var thisDistance = Math.abs( normValue - that.values(i) );
			if (( distance > thisDistance ) ||
				( distance === thisDistance &&
					(i === that._lastChangedValue || that.values(i) === o.min ))) {
				distance = thisDistance;
				closestHandle = $( this );
				index = i;


		this.handles.each(function( i ) {
			if ( == that.handles[i]) {
				index = i;
				closestHandle = $( this );

Attachments (0)
Change History (11)

Changed September 12, 2013 03:10PM UTC by w.pasman comment:1

Note that some variables may become unused and may also be removed. Above is a kind of 'minimal fix'.

Changed September 13, 2013 12:32PM UTC by tj.vantoll comment:2

component: ui.coreui.slider
status: newopen
summary: drag selected instead of closed handle in sliderSlider: drag selected instead of closed handle

Changed September 13, 2013 05:08PM UTC by w.pasman comment:3

_comment0: I now notice that in the title, 'closed' should be 'closest'. But I don't see how to change the title of the ticket.1379092169354207

I now notice that in the title, 'closed' should be 'closest'. But I don't see how to change the title of the ticket.

Or maybe even better, 'nearest'... :-)

Changed September 13, 2013 05:11PM UTC by tj.vantoll comment:4

summary: Slider: drag selected instead of closed handleSlider: drag selected instead of closest handle

Changed September 18, 2013 08:12AM UTC by w.pasman comment:5

I just noticed that my proposed fix has a problem if you hard replace the contents of a slider by a more complex element (default is just a plain text string).

In that case, closestHandle remains null and the slider can not be selected.

To overcome this problem, the following replacement seems to work ok in all cases

		this.handles.each(function( i ) {
			if (that.handles[i].contains( {
				index = i;
				closestHandle = $( this );

Changed January 20, 2014 03:50PM UTC by tj.vantoll comment:6

#9753 is a duplicate of this ticket.

Changed January 20, 2014 03:50PM UTC by tj.vantoll comment:7

Changed March 30, 2015 08:30AM UTC by atomiomi comment:8

Changed March 09, 2017 05:09PM UTC by scottgonzalez comment:9

#15145 is a duplicate of this ticket.

Changed March 10, 2017 10:14AM UTC by q-jack comment:10

so this is still open for 3 years now. Are there gonna be some fixes?

Changed May 09, 2017 12:23PM UTC by determin1st comment:11

_comment0: hello, \ \ i cant find this replacement nice, because handles may fully intersect and the selection at this condition for lower handle wouldn't be possible (when the mouse is over). As the selection point is at handle center, it is possible to capture both handles - so it doesnt make input problem. \ \ \ 1494340279175864