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 ); } } },