Slider: Range fills all space after changing orientation

atomiomi · scottgonzalez · commit 897a23833211 · 2015-04-22T12:55:54.000-04:00
Resets width/height of range Fixes #12205 Closes jquerygh-1533
diff --git a/tests/unit/slider/options.js b/tests/unit/slider/options.js
@@ -109,7 +109,7 @@ test( "min", function() {
 });
 
 test( "orientation", function( assert ) {
-	expect( 8 );
+	expect( 14 );
 	element = $( "#slider1" );
 
 	options = {
@@ -119,7 +119,8 @@ test( "orientation", function( assert ) {
 		value: 1
 	};
 
-	var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
+	var newValue, rangeSize,
+		percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
 
 	element.slider( options ).slider( "option", "orientation", "horizontal" );
 	assert.hasClasses( element, "ui-slider-horizontal" );
@@ -146,6 +147,42 @@ test( "orientation", function( assert ) {
 
 	element.slider( "destroy" );
 
+	newValue = 7;
+	rangeSize = 500 - (500 * newValue / 10);
+	element = $( "#slider2" ).slider({
+		range: "max",
+		min: 0,
+		max: 10
+	});
+
+	element.slider( "option", "value", newValue );
+	element.slider( "option", "orientation", "vertical" );
+	equal( element.find( ".ui-slider-range" ).width(), 12,
+		"range should occupy all horizontal space after changing orientation to vertical" );
+	equal( element.find( ".ui-slider-range" ).height(), rangeSize,
+		"range height of vertical slider should be proportional to the value" );
+
+	element.slider( "option", "orientation", "horizontal" );
+	equal( element.find( ".ui-slider-range " ).height(), 12,
+		"range should occupy all vertical space after changing orientation to horizontal" );
+	equal( element.find( ".ui-slider-range" ).width(), rangeSize,
+		"range width of horizontal slider should be proportional to the value" );
+
+	element.slider( "destroy" );
+
+	element = $( "#slider2" ).slider({
+		range: true,
+		min: 0,
+		max: 100
+	});
+	element.slider( "option", { values: [ 60, 70 ] } );
+	notEqual( element.find( ".ui-slider-range " ).position().left, 0,
+		"range should not pull over to the track's border" );
+	element.slider( "option", "orientation", "vertical" );
+	equal( element.find( ".ui-slider-range " ).position().left, 0,
+		"range should pull over to the track's border" );
+
+	element.slider( "destroy" );
 });
 
 //spec: http://wiki.jqueryui.com/Slider#specs
diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html
@@ -7,13 +7,24 @@
 	<script src="../../../external/requirejs/require.js"></script>
 	<script src="../../lib/css.js" data-modules="core slider"></script>
 	<script src="../../lib/bootstrap.js" data-widget="slider"></script>
+	<style>
+	#slider2.ui-slider-horizontal {
+		height: 12px;
+		width: 500px;
+	}
+	#slider2.ui-slider-vertical {
+		width: 12px;
+		height: 500px;
+	}
+	</style>
 </head>
 <body>
 
 <div id="qunit"></div>
 <div id="qunit-fixture">
 
 <div id="slider1"></div>
+<div id="slider2"></div>
 <div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;">
 	<div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div>
 </div>
diff --git a/ui/slider.js b/ui/slider.js
@@ -440,6 +440,9 @@ return $.widget( "ui.slider", $.ui.mouse, {
 				this._removeClass( "ui-slider-horizontal ui-slider-vertical" )
 					._addClass( "ui-slider-" + this.orientation );
 				this._refreshValue();
+				if ( this.options.range ) {
+					this._refreshRange( value );
+				}
 
 				// Reset positioning from previous orientation
 				this.handles.css( value === "horizontal" ? "bottom" : "left", "" );
@@ -564,6 +567,15 @@ return $.widget( "ui.slider", $.ui.mouse, {
 		return this.max;
 	},
 
+	_refreshRange: function ( orientation ) {
+		if ( orientation === "vertical" ) {
+			this.range.css( { "width": "", "left": "" } );
+		}
+		if ( orientation === "horizontal" ) {
+			this.range.css( { "height": "", "bottom": "" } );
+		}
+	},
+
 	_refreshValue: function() {
 		var lastValPercent, valPercent, value, valueMin, valueMax,
 			oRange = this.options.range,
