diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
index cc5546a9f6f..8ca0ebdeeb3 100644
--- a/tests/unit/slider/slider_events.js
+++ b/tests/unit/slider/slider_events.js
@@ -29,6 +29,36 @@ test( "mouse based interaction", function() {
.simulate( "drag", { dx: 10, dy: 10 } );
});
+
+asyncTest( "range slider animation", function() {
+ expect( 2 );
+
+ var animateDuration = 2000,
+ element = $( "#slider1" )
+ .slider({
+ range: "max",
+ animate: animateDuration,
+ min: 0,
+ max: 100,
+ value: 0
+ }),
+ handle = element.find( ".ui-slider-handle" ),
+ highlight = element.find( ".ui-slider-range" ),
+ left = element.offset().left,
+ width = element.width();
+
+ element.simulate( "mousedown", { clientX: left + width });
+ element.simulate( "mouseup" );
+
+ setTimeout(function () {
+ element.simulate( "mousedown", { clientX: left } );
+ element.simulate( "mouseup" );
+ equal( highlight.width(), 0, "animation of range in sync" );
+ ok( Math.abs( handle.offset().left ) > Math.abs( left + width ), "animation of handle in sync" );
+ start();
+ }, animateDuration / 2);
+});
+
test( "keyboard based interaction", function() {
expect( 3 );
diff --git a/tests/visual/slider/range_slider.html b/tests/visual/slider/range_slider.html
index 2b041f37740..690930debdb 100644
--- a/tests/visual/slider/range_slider.html
+++ b/tests/visual/slider/range_slider.html
@@ -25,16 +25,31 @@
When set both values of range slider to the maximum, slider should not lock<
+
+
+
+
+ Max Range Slider
+ Animation of range and handle in sync
+
var el = $( "#slider" ).slider({
- range: true,
- min: 0,
- max: 100,
- values: [ 0, 50 ]
- });
+ range: true,
+ min: 0,
+ max: 100,
+ values: [ 0, 50 ]
+ }),
+ el2 = $( "#max-slider" ).slider({
+ range: "max",
+ animate: "slow",
+ min: 0,
+ max: 100,
+ values: 50
+ });
+ //range slider
$( "#set-max-values" ).on( "click", function() {
el.slider( "option", { values: [ 100, 100 ] } );
});
diff --git a/ui/slider.js b/ui/slider.js
index 4ca9c60022b..a9cec83af66 100644
--- a/ui/slider.js
+++ b/ui/slider.js
@@ -610,13 +610,13 @@ return $.widget( "ui.slider", $.ui.mouse, {
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
}
if ( oRange === "max" && this.orientation === "horizontal" ) {
- this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
+ this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, o.animate );
}
if ( oRange === "min" && this.orientation === "vertical" ) {
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
}
if ( oRange === "max" && this.orientation === "vertical" ) {
- this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
+ this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, o.animate );
}
}
},