Slider: drag selected instead of closest handle

[w.pasman]

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 ​​http://jqueryui.com/slider/#range 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;
			}
		});

with

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

[w.pasman]

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

[w.pasman]

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'... :-)

[w.pasman]

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(event.target)) {
				index = i;
				closestHandle = $( this );
			}
		});

[tj.vantoll]

#9753 is a duplicate of this ticket.

[tj.vantoll]

Test case from #9753: ​http://jsfiddle.net/trivender/6NftK/25/.

[atomiomi]

PR link - ​https://github.com/jquery/jquery-ui/pull/1514

[Scott González]

#15145 is a duplicate of this ticket.

[q-jack]

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