Opened 5 years ago

Last modified 21 months ago

#9553 open bug

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:

Description

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 );
			}
		});

Change History (11)

comment:1 Changed 5 years ago by w.pasman

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

comment:2 Changed 5 years ago by tj.vantoll

Component: ui.coreui.slider
Status: newopen
Summary: drag selected instead of closed handle in sliderSlider: drag selected instead of closed handle

comment:3 Changed 5 years ago by 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'... :-)

Last edited 5 years ago by w.pasman (previous) (diff)

comment:4 Changed 5 years ago by tj.vantoll

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

comment:5 Changed 5 years ago by 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 );
			}
		});

comment:6 Changed 5 years ago by tj.vantoll

#9753 is a duplicate of this ticket.

comment:9 Changed 23 months ago by Scott González

#15145 is a duplicate of this ticket.

comment:10 Changed 23 months ago by q-jack

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

comment:11 Changed 21 months ago by Michael Quad

Last edited 21 months ago by Michael Quad (previous) (diff)
Note: See TracTickets for help on using tickets.