Slider: Reset positioning when orientation changes

Fixes #10105
Closes gh-1268

diff --git a/tests/unit/slider/slider_options.js b/tests/unit/slider/slider_options.js
index 5cfb5351af07ce5937c6c3ce200578e7fe8f5205..587f847cfa39b0422d76015abe2003ab55b085a5 100644 (file)
--- a/tests/unit/slider/slider_options.js
+++ b/tests/unit/slider/slider_options.js
@@ -78,7 +78,7 @@ test( "min", function() {
 });
 
 test( "orientation", function() {
-       expect( 6 );
+       expect( 8 );
        element = $( "#slider1" );
 
        options = {
@@ -93,6 +93,7 @@ test( "orientation", function() {
        element.slider( options ).slider( "option", "orientation", "horizontal" );
        ok( element.is( ".ui-slider-horizontal" ), "horizontal slider has class .ui-slider-horizontal" );
        ok( !element.is( ".ui-slider-vertical" ), "horizontal slider does not have class .ui-slider-vertical" );
+       equal( element.find( ".ui-slider-handle" )[ 0 ].style.bottom, "", "CSS bottom reset" );
        equal( handle()[0].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" );
 
        element.slider( "destroy" ) ;
@@ -109,6 +110,7 @@ test( "orientation", function() {
        element.slider( options ).slider( "option", "orientation", "vertical" );
        ok( element.is( ".ui-slider-vertical" ), "vertical slider has class .ui-slider-vertical" );
        ok( !element.is( ".ui-slider-horizontal" ), "vertical slider does not have class .ui-slider-horizontal" );
+       equal( element.find( ".ui-slider-handle" )[ 0 ].style.left, "", "CSS left reset" );
        equal( handle()[0].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" );
 
        element.slider( "destroy" );

diff --git a/ui/slider.js b/ui/slider.js
index 73bfb02736b6d4076f10afca62a36ed59a7f29aa..58b5c075992b12f072403a9d341bebd4c571e468 100644 (file)
--- a/ui/slider.js
+++ b/ui/slider.js
@@ -454,6 +454,9 @@ return $.widget( "ui.slider", $.ui.mouse, {
                                        .removeClass( "ui-slider-horizontal ui-slider-vertical" )
                                        .addClass( "ui-slider-" + this.orientation );
                                this._refreshValue();
+
+                               // Reset positioning from previous orientation
+                               this.handles.css( value === "horizontal" ? "bottom" : "left", "" );
                                break;
                        case "value":
                                this._animateOff = true;