mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
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
(cherry picked from commit dff1c74dd4
)
This commit is contained in:
parent
ec6e10de6b
commit
f2e8471f35
@ -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 );
|
||||
|
47
tests/visual/slider/range_slider.html
Normal file
47
tests/visual/slider/range_slider.html
Normal file
@ -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>
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user