Permalink
Browse files

Slider: Range fills all space after changing orientation

Resets width/height of range

Fixes #12205
Closes gh-1533
  • Loading branch information...
atomiomi authored and scottgonzalez committed Apr 7, 2015
1 parent ec952e2 commit 897a238332110c5c1a58ee9a0db5bf4e54fc3059
Showing with 62 additions and 2 deletions.
  1. +39 −2 tests/unit/slider/options.js
  2. +11 −0 tests/unit/slider/slider.html
  3. +12 −0 ui/slider.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
@@ -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>
View
@@ -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,

0 comments on commit 897a238

Please sign in to comment.