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

1 files changed, 51 insertions, 0 deletions

diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
index 2fb9b37b6..b6fa6698d 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 ) );