library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
When both values are set to the maximum change them in descending order

Fixes #9046
Closes gh-1502
This commit is contained in:
Ablay Keldibek 2015-03-16 15:10:23 +06:00 committed by Scott González
parent 868e8c70e3
commit dff1c74dd4
3 changed files with 67 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
tests/unit/slider/slider_events.js
View File

@ -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() {

47
tests/visual/slider/range_slider.html Normal file
View 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>

4
ui/slider.js
View File

@ -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;