]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ec6e10d)
Slider: Fix handle order when setting values of range slider to max
authorAblay Keldibek <atomio.ak@gmail.com>
Mon, 16 Mar 2015 09:10:23 +0000 (15:10 +0600)
committerScott González <scott.gonzalez@gmail.com>
Thu, 9 Jun 2016 16:36:10 +0000 (12:36 -0400)
When both values are set to the maximum change them in descending order

Fixes #9046
Closes gh-1502

(cherry picked from commit dff1c74dd4c0fd6b951c7c183bebae09f9f229f6)

tests/unit/slider/slider_events.js patch | blob | history
tests/visual/slider/range_slider.html [new file with mode: 0644] patch | blob
ui/slider.js patch | blob | history

diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
index ec93a056536fec453ae3ed28dac644e310563c55..6de3a65cdef3e0fff88d997d7f5386cad1e9d369 100644 (file)
--- 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" );
 });
 
 })( jQuery );
diff --git a/tests/visual/slider/range_slider.html b/tests/visual/slider/range_slider.html
new file mode 100644 (file)
index 0000000..2b041f3
--- /dev/null
+++ 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
index 65204ca9168802e9328cc7927a161057f8a741da..e15b4984ed78c13af97855ab429b8ee3bdc38f7e 100644 (file)
--- a/ui/slider.js
+++ b/ui/slider.js
@@ -468,7 +468,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;
The official jQuery user interface library: https://github.com/jquery/jquery-ui