Slider: Fix handle order when setting values of range slider to max

When both values are set to the maximum change them in descending order Fixes #9046 Closes gh-1502
jquery · Mar 16, 2015 · dff1c74dd4c0fd6b951c7c183bebae09f9f229f6 · dff1c74
1 parent 868e8c7
commit dff1c74dd4c0fd6b951c7c183bebae09f9f229f6
Unified Split

Showing with 67 additions and 2 deletions.

+17 −1 tests/unit/slider/slider_events.js

+47 −0 tests/visual/slider/range_slider.html

+3 −1 ui/slider.js
diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
@@ -99,7 +99,7 @@ test( "programmatic event triggers", function() {
 });

 test( "mouse based interaction part two: when handles overlap", function() {
-	expect( 4 );
+	expect( 6 );

 	var element = $( "#slider1" )
 		.slider({
@@ -147,6 +147,22 @@ test( "mouse based interaction part two: when handles overlap", function() {
 	});
 	handles.eq( 0 ).simulate( "drag", { dx: 10 } );

+	element = $( "#slider1" )
+		.slider({
+			range: true,
+			min: 0,
+			max: 100,
+			values: [ 0, 50 ]
+		}),
+		handles = element.find( ".ui-slider-handle" );
+
+	element.slider( "option", { values: [ 100, 100 ] } );
+	handles.eq( 0 ).simulate( "drag", { dx: -10 } );
+	equal( element.slider( "values" )[ 0 ], 99, "setting both values of range slider to the maximum doesn't lock slider" );
+
+	element.slider( "option", { values: [ 0, 0 ] } );
+	handles.eq( 1 ).simulate( "drag", { dx: 10 } );
+	equal( element.slider( "values" )[ 1 ], 1, "setting both values of range slider to the minimum  doesn't lock slider" );
 });

 test( "event data", function() {
diff --git a/tests/visual/slider/range_slider.html b/tests/visual/slider/range_slider.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+	<meta charset="UTF-8">
+	<title>jQuery UI Slider - Range slider</title>
+	<link rel="stylesheet" href="../../../themes/base/all.css">
+	<style>
+		#wrapper {
+			font-family: Arial;
+			width: 500px;
+			margin: 20px auto;
+		}
+	</style>
+	<script src="../../../external/jquery/jquery.js"></script>
+	<script src="../../../ui/core.js"></script>
+	<script src="../../../ui/widget.js"></script>
+	<script src="../../../ui/mouse.js"></script>
+	<script src="../../../ui/slider.js"></script>
+</head>
+<body>
+<div id="wrapper">
+	<h1>Range Slider</h1>
+	<h3>When set both values of range slider to the maximum, slider should not lock</h3>
+	<div id="slider"></div>
+	<br>
+	<button id="set-max-values">set values to max</button>
+	<button id="set-min-values">set values to min</button>
+</div>
+
+<script>
+	var el = $( "#slider" ).slider({
+		range: true,
+		min: 0,
+		max: 100,
+		values: [ 0, 50 ]
+	});
+
+	$( "#set-max-values" ).on( "click", function() {
+		el.slider( "option", { values: [ 100, 100 ] } );
+	});
+
+	$( "#set-min-values" ).on( "click", function() {
+		el.slider( "option", { values: [ 0, 0 ] } );
+	});
+</script>
+</body>
+</html>
diff --git a/ui/slider.js b/ui/slider.js
@@ -453,7 +453,9 @@ return $.widget( "ui.slider", $.ui.mouse, {
 			case "values":
 				this._animateOff = true;
 				this._refreshValue();
-				for ( i = 0; i < valsLength; i += 1 ) {
+
+				// Start from the last handle to prevent unreachable handles (#9046)
+				for ( i = valsLength - 1; i >= 0; i-- ) {
 					this._change( null, i );
 				}
 				this._animateOff = false;