From a18863205e060bf9a145bb5ed90e36d8feb3c8f7 Mon Sep 17 00:00:00 2001
From: Juan Pablo Kaniefsky <jpkaniefsky@gmail.com>
Date: Tue, 13 Nov 2012 22:05:59 -0300
Subject: [PATCH] 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

---
 tests/unit/slider/slider_events.js | 51 ++++++++++++++++++++++++++++++
 ui/jquery.ui.slider.js             | 15 ++++-----
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
index 2fb9b37b614..b6fa6698d4a 100644
--- a/tests/unit/slider/slider_events.js
+++ b/tests/unit/slider/slider_events.js
@@ -104,4 +104,55 @@ test( "programmatic event triggers", function() {
 
 });
 
+test( "mouse based interaction part two: when handles overlap", function() {
+	expect(4);
+
+	var el = $( "#slider1" )
+		.slider({
+			values: [ 0, 0, 0 ],
+			start: function( event, ui ) {
+				equal(handles.index(ui.handle), 2, "rightmost handle activated when overlapping at minimum (#3736)");
+			}
+		}),
+		handles = el.find( ".ui-slider-handle" );
+	handles.eq(0).simulate( "drag", { dx: 10 } );
+
+	QUnit.reset();
+	el = $( "#slider1" )
+		.slider({
+			values: [ 10, 10, 10 ],
+			max: 10,
+			start: function( event, ui ) {
+				equal(handles.index(ui.handle), 0, "leftmost handle activated when overlapping at maximum");
+			}
+		}),
+		handles = el.find( ".ui-slider-handle" );
+	handles.eq(0).simulate( "drag", { dx: -10 } );
+
+	QUnit.reset();
+	el = $( "#slider1" )
+		.slider({
+			values: [ 19, 20 ]
+		}),
+		handles = el.find( ".ui-slider-handle" );
+	handles.eq(0).simulate( "drag", { dx: 10 } );
+	el.on("slidestart", function(event, ui) {
+		equal(handles.index(ui.handle), 0, "left handle activated if left was moved last");
+	});
+	handles.eq(0).simulate( "drag", { dx: 10 } );
+
+	QUnit.reset();
+	el = $( "#slider1" )
+		.slider({
+			values: [ 19, 20 ]
+		}),
+		handles = el.find( ".ui-slider-handle" );
+	handles.eq(1).simulate( "drag", { dx: -10 } );
+	el.on("slidestart", function(event, ui) {
+		equal(handles.index(ui.handle), 1, "right handle activated if right was moved last (#3467)");
+	});
+	handles.eq(0).simulate( "drag", { dx: 10 } );
+
+});
+
 }( jQuery ) );
diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js
index 18f7113d400..90de2531684 100644
--- a/ui/jquery.ui.slider.js
+++ b/ui/jquery.ui.slider.js
@@ -233,21 +233,15 @@ $.widget( "ui.slider", $.ui.mouse, {
 		distance = this._valueMax() - this._valueMin() + 1;
 		this.handles.each(function( i ) {
 			var thisDistance = Math.abs( normValue - that.values(i) );
-			if ( distance > thisDistance ) {
+			if (( distance > thisDistance ) ||
+				( distance === thisDistance &&
+					(i === that._lastChangedValue || that.values(i) === o.min ))) {
 				distance = thisDistance;
 				closestHandle = $( this );
 				index = i;
 			}
 		});
 
-		// workaround for bug #3736 (if both handles of a range are at 0,
-		// the first is always used as the one with least distance,
-		// and moving it is obviously prevented by preventing negative ranges)
-		if( o.range === true && this.values(1) === o.min ) {
-			index += 1;
-			closestHandle = $( this.handles[index] );
-		}
-
 		allowed = this._start( event, index );
 		if ( allowed === false ) {
 			return false;
@@ -419,6 +413,9 @@ $.widget( "ui.slider", $.ui.mouse, {
 				uiHash.values = this.values();
 			}
 
+			//store the last changed value index for reference when handles overlap
+			this._lastChangedValue = index;
+
 			this._trigger( "change", event, uiHash );
 		}
 	},