Skip to content

Commit 5dd027f

Browse files
dekajpdekajp
committed
Slider: Fix to restrict handle values when set programmatically.
Fixes #3762 - Slider: handles not restricted properly when set programmatically
1 parent ea999e4 commit 5dd027f

File tree

3 files changed

+153
-12
lines changed

3 files changed

+153
-12
lines changed

‎tests/unit/slider/slider_methods.js‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,90 @@ test( "value", function() {
100100
equal( element.slider( "value" ), 2.4, "value is set to max with 0.01 step" );
101101
});
102102

103-
//test( "values", function() {
104-
// ok(false, "missing test - untested code is broken code." );
105-
//});
103+
test( "values", function() {
104+
expect( 17 );
105+
106+
var element = $( "<div></div>" ).slider({
107+
range: true,
108+
min: 10,
109+
max: 100,
110+
step: 1
111+
});
112+
113+
element.slider( "values", [ 20, 90 ] );
114+
deepEqual( element.slider( "values" ), [ 20, 90 ], "Values (array) - get value for all handles" );
115+
116+
element.slider( "values", [ 0, 200 ] );
117+
deepEqual( element.slider( "values" ), [ 10, 100 ], "Values (array) - restricted min and max" );
118+
119+
element.slider( "values", 0, 50 );
120+
equal( element.slider( "values", 0 ), 50, "Values (index,value) - set first handle" );
121+
122+
element.slider( "values", 1, 75 );
123+
equal( element.slider( "values", 1 ), 75, "Values (index,value) - set second handle" );
124+
125+
element.slider( "values", [ 50, 75 ] );
126+
element.slider( "values", 0, 5 );
127+
equal( element.slider( "values", 0 ), 10, "Values (index,value) - 1st handle restricted properly, against min" );
128+
129+
element.slider( "values", 1, 5 );
130+
equal( element.slider( "values", 0 ), 10, "Values (index,value) - 2nd handle restricted properly, against min" );
131+
132+
element.slider( "values", [ 50, 75 ] );
133+
element.slider( "values", 0, 110 );
134+
equal( element.slider( "values", 0 ), 75, "Values (index,value) - 1st handle restricted properly, against max" );
135+
136+
element.slider( "values", 1, 110 );
137+
equal( element.slider( "values", 1 ), 100, "Values (index,value) - 2nd handle restricted properly, against max" );
138+
139+
element.slider( "values", [ 50, 75 ] );
140+
element.slider( "values", 0, 90 );
141+
equal( element.slider( "values", 0 ), 75, "Values (index,value) - 1st handle restricted properly, against 2nd handle" );
142+
143+
element.slider( "values", [ 50, 75 ] );
144+
element.slider( "values", 1, 45 );
145+
equal( element.slider( "values", 1 ), 50, "Values (index,value) - 2nd handle restricted properly, against 1st handle" );
146+
147+
element.slider( "values", [ 50, 75 ] );
148+
element.slider( "values", [ 50, 10 ] );
149+
deepEqual( element.slider( "values" ), [ 50, 50 ], "Values (array) - Setting both handles - 2nd Handle resets to 1st" );
150+
151+
element.slider( "values", [ 50, 75 ] );
152+
element.slider( "values", [ 75, 50 ] );
153+
deepEqual( element.slider( "values" ), [ 75, 75 ], "Values (array) - Setting both handles - 2nd Handle resets to 1st" );
154+
155+
element.slider( "destroy" );
156+
element = $( "<div></div>" ).slider({
157+
range: true,
158+
min: 1,
159+
max: 2,
160+
step: 0.2
161+
});
162+
163+
element.slider( "values", [ 1.4, 1.2] );
164+
deepEqual( element.slider( "values" ), [ 1.4 , 1.4 ], "Values (array) - Floating Point - 2nd value restricted" );
165+
166+
element.slider( "destroy" );
167+
element = $( "<div></div>" ).slider({
168+
range: true,
169+
min: 1.1,
170+
max: 2,
171+
step: 0.2
172+
});
173+
174+
element.slider( "values", [ 0.1, 2.2] );
175+
deepEqual( element.slider( "values" ), [ 1.1, 1.9 ], "Values (array) - Floating Point - uneven step - restricted min max" );
176+
177+
element.slider( "values", [1.5, 1.3] );
178+
deepEqual( element.slider( "values" ), [ 1.5, 1.5 ], "Values (array) - Floating Point - uneven step - 2nd Handle restricted" );
179+
180+
element.slider( "values", [1.5, 1.5] );
181+
element.slider( "values", 1, 1.3 );
182+
deepEqual( element.slider( "values" ), [ 1.5, 1.5 ], "Values (index,value) - Floating Point - uneven step - 2nd Handle restricted" );
183+
184+
element.slider( "values", [1.5, 1.5] );
185+
element.slider( "values", 0, 1.6 );
186+
deepEqual( element.slider( "values" ), [ 1.5, 1.5 ], "Values (index,value) - Floating Point - uneven step - 1st Handle restricted" );
187+
});
106188

107189
})( jQuery );

‎tests/unit/slider/slider_options.js‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -198,18 +198,19 @@ test( "step", function() {
198198
//});
199199

200200
test( "values", function() {
201-
expect( 2 );
201+
expect( 6 );
202202

203203
// testing multiple ranges on the same page, the object reference to the values
204204
// property is preserved via multiple range elements, so updating options.values
205205
// of 1 slider updates options.values of all the others
206-
var ranges = $([
207-
document.createElement( "div" ),
208-
document.createElement( "div" )
209-
]).slider({
210-
range: true,
211-
values: [ 25, 75 ]
212-
});
206+
var element,
207+
ranges = $([
208+
document.createElement( "div" ),
209+
document.createElement( "div" )
210+
]).slider({
211+
range: true,
212+
values: [ 25, 75 ]
213+
});
213214

214215
notStrictEqual(
215216
ranges.eq( 0 ).slider( "instance" ).options.values,
@@ -224,6 +225,26 @@ test( "values", function() {
224225
ranges.eq( 1 ).slider( "values", 0 ),
225226
"the values for multiple sliders should be different"
226227
);
228+
229+
element = $( "<div></div>" ).slider({
230+
range: true,
231+
min: 10,
232+
max: 100,
233+
step: 1,
234+
values: [ 15, 1 ]
235+
});
236+
deepEqual( element.slider( "values" ), [ 15, 15 ], "handles restricted properly when set programmatically - 2nd handle reset" );
237+
238+
element.slider( "option", "values", [ 0, 200 ] );
239+
deepEqual( element.slider( "values" ), [ 10, 100 ], "option values - restricted min and max" );
240+
241+
element.slider( "option", "values", [ 15, 1 ] );
242+
deepEqual( element.slider( "values" ), [ 15, 15 ], "option values - restricted 2nd Handle" );
243+
244+
element.slider( "option", "values", [ 15, 15 ] );
245+
element.slider( "option", "values", [ 25, 15 ] );
246+
deepEqual( element.slider( "values" ), [ 25, 25 ], "option values - restricted 2nd Handle" );
247+
227248
});
228249

229250
test( "range", function() {

‎ui/slider.js‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
6767
this._detectOrientation();
6868
this._mouseInit();
6969
this._calculateNewMax();
70+
this._cleanValues();
7071

7172
this.element
7273
.addClass( "ui-slider" +
@@ -157,6 +158,41 @@ return $.widget( "ui.slider", $.ui.mouse, {
157158
}
158159
},
159160

161+
_cleanValues: function( index, newValue ) {
162+
var values;
163+
164+
if ( this.options.range === true ){
165+
if ( arguments.length === 2 ) {
166+
values = this.options.values;
167+
if ( index === 0 && newValue > values[ 1 ] ) {
168+
newValue = values[ 1 ];
169+
}else if ( index === 1 && newValue < values[ 0 ] ) {
170+
newValue = values[ 0 ];
171+
}
172+
return newValue;
173+
}
174+
175+
values = arguments[ 0 ] || this.options.values;
176+
if ( values ) {
177+
if ( values[ 0 ] > values[ 1 ] ) {
178+
values[ 1 ] = values[ 0 ];
179+
}
180+
181+
if ( !arguments.length ){
182+
this.options.values = values;
183+
}
184+
185+
return values;
186+
}
187+
} else {
188+
if ( $.isArray( arguments[ 0 ] ) ) {
189+
return arguments[0];
190+
} else {
191+
return newValue;
192+
}
193+
}
194+
},
195+
160196
_setupEvents: function() {
161197
this._off( this.handles );
162198
this._on( this.handles, this._handleEvents );
@@ -406,6 +442,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
406442

407443
if ( arguments.length > 1 ) {
408444
this.options.values[ index ] = this._trimAlignValue( newValue );
445+
this.options.values[ index ] = this._cleanValues( index, newValue );
409446
this._refreshValue();
410447
this._change( null, index );
411448
return;
@@ -414,7 +451,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
414451
if ( arguments.length ) {
415452
if ( $.isArray( arguments[ 0 ] ) ) {
416453
vals = this.options.values;
417-
newValues = arguments[ 0 ];
454+
newValues = this._cleanValues( arguments[ 0 ] );
418455
for ( i = 0; i < vals.length; i += 1 ) {
419456
vals[ i ] = this._trimAlignValue( newValues[ i ] );
420457
this._change( null, i );
@@ -475,6 +512,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
475512
break;
476513
case "values":
477514
this._animateOff = true;
515+
this._cleanValues();
478516
this._refreshValue();
479517
for ( i = 0; i < valsLength; i += 1 ) {
480518
this._change( null, i );

0 commit comments

Comments
 (0)