Skip to content

Commit 3a6feb7

Browse files
lams1986lams1986
committed
Slider: Avoid the slider to be locked when both values are max (if range option is true). Fixed #9046 - Setting both values of range slider to maximum value, locks the slider
Basically, by the time both handles are set to the maximum value, I give a focus on the first handle. Doing that, the lock is avoided because the user will have control on it (first handle), allowing drag it to the left whenever necessary. I also added a visual test.
1 parent 46e46ef commit 3a6feb7

File tree

2 files changed

+89
-2
lines changed

2 files changed

+89
-2
lines changed

‎tests/visual/slider/range.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Slider - Range slider</title>
6+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
7+
<script src="../../../jquery-1.9.1.js"></script>
8+
<script src="../../../ui/jquery.ui.core.js"></script>
9+
<script src="../../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../../ui/jquery.ui.slider.js"></script>
12+
<script>
13+
$(function() {
14+
$( "#slider-range" ).slider({
15+
range: true,
16+
min: 100,
17+
max: 500,
18+
values: [ 200, 350 ],
19+
slide: function( event, ui ) {
20+
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
21+
$("#leftValue").val(ui.values[ 0 ]);
22+
$("#rightValue").val(ui.values[ 1 ]);
23+
}
24+
});
25+
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
26+
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
27+
28+
$("#leftValue").val($( "#slider-range" ).slider( "values", 0 ));
29+
$("#rightValue").val($( "#slider-range" ).slider( "values", 1 ));
30+
});
31+
32+
function clickBnt1() {
33+
var leftValue = $("#leftValue").val();
34+
var rightValue = $( "#slider-range" ).slider( "values", 1 );
35+
36+
$( "#slider-range" ).slider( "option", "values", [ leftValue, rightValue ] );
37+
38+
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
39+
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
40+
41+
$("#leftValue").val($( "#slider-range" ).slider( "values", 0 ));
42+
$("#rightValue").val($( "#slider-range" ).slider( "values", 1 ));
43+
};
44+
45+
function clickBnt2() {
46+
var leftValue = $( "#slider-range" ).slider( "values", 0 );
47+
var rightValue = $("#rightValue").val();
48+
49+
$( "#slider-range" ).slider( "option", "values", [ leftValue, rightValue ] );
50+
51+
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
52+
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
53+
54+
$("#leftValue").val($( "#slider-range" ).slider( "values", 0 ));
55+
$("#rightValue").val($( "#slider-range" ).slider( "values", 1 ));
56+
};
57+
58+
</script>
59+
</head>
60+
<body>
61+
62+
<p>
63+
<label for="amount">Range:</label>
64+
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
65+
<br/>
66+
Left value:<input type="text" id="leftValue" /> <input type="button" id="bntLeftValue" value="ok" onclick="clickBnt1();" />
67+
<br/>
68+
Right value:<input type="text" id="rightValue" /> <input type="button" id="bntRightValue" value="ok" onclick="clickBnt2();" />
69+
</p>
70+
71+
<div id="slider-range"></div>
72+
73+
<div class="demo-description">
74+
<br/>
75+
<b>First test:</b>
76+
<p>Set the left value to be greater than right value (use the textboxes to achieve this). Note that both values will be equated.</p>
77+
<b>Second test:</b>
78+
<p>Set the right value to the max (through textbox or mouse). After that, set the left value to the max too (through textbox). Then, try to move the handle via mouse. In previous versions the slider used to lock after doing these steps.</p>
79+
</div>
80+
</body>
81+
</html>

‎ui/jquery.ui.slider.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@ $.widget( "ui.slider", $.ui.mouse, {
9898

9999
_createRange: function() {
100100
var options = this.options,
101-
classes = "";
102-
101+
classes = ""
102+
103103
if ( options.range ) {
104104
if ( options.range === true ) {
105105
if ( !options.values ) {
@@ -426,6 +426,12 @@ $.widget( "ui.slider", $.ui.mouse, {
426426
}
427427
if(options.values[0] > options.values[1]) {
428428
options.values[1] = options.values[0];
429+
this._handleIndex = 0;
430+
}
431+
if(options.values[0] == this._valueMax() && options.values[1] == this._valueMax()) {
432+
if(this.handles) {
433+
this._handleIndex = 0;
434+
}
429435
}
430436
}
431437
}

0 commit comments

Comments
 (0)