diff options
| author | Ablay Keldibek <atomio.ak@gmail.com> | 2015-03-16 15:10:23 +0600 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2015-03-18 10:49:01 -0400 |
| commit | dff1c74dd4c0fd6b951c7c183bebae09f9f229f6 (patch) | |
| tree | c869ec09650bb29774438734b493e68f6071ccd4 | |
| parent | 868e8c70e391b5ba886edc93fdec28086a6a3fca (diff) | |
| download | jquery-ui-dff1c74dd4c0fd6b951c7c183bebae09f9f229f6.tar.gz jquery-ui-dff1c74dd4c0fd6b951c7c183bebae09f9f229f6.zip | |
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
| -rw-r--r-- | tests/unit/slider/slider_events.js | 18 | ||||
| -rw-r--r-- | tests/visual/slider/range_slider.html | 47 | ||||
| -rw-r--r-- | ui/slider.js | 4 |
3 files changed, 67 insertions, 2 deletions
diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index d020d8ac6..cc5546a9f 100644 --- 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 new file mode 100644 index 000000000..2b041f377 --- /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 094f0135d..4ca9c6002 100644 --- 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; |