diff options
| author | Ablay Keldibek <atomio.ak@gmail.com> | 2015-04-07 20:10:27 +0600 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2015-04-22 12:55:54 -0400 |
| commit | 897a238332110c5c1a58ee9a0db5bf4e54fc3059 (patch) | |
| tree | c157dbaf6d87ab9e3f871fb81c85c2c5582ef250 | |
| parent | ec952e2909113b45dab7ddaa817cb3766f39ba18 (diff) | |
| download | jquery-ui-897a238332110c5c1a58ee9a0db5bf4e54fc3059.tar.gz jquery-ui-897a238332110c5c1a58ee9a0db5bf4e54fc3059.zip | |
Slider: Range fills all space after changing orientation
Resets width/height of range
Fixes #12205
Closes gh-1533
| -rw-r--r-- | tests/unit/slider/options.js | 41 | ||||
| -rw-r--r-- | tests/unit/slider/slider.html | 11 | ||||
| -rw-r--r-- | ui/slider.js | 12 |
3 files changed, 62 insertions, 2 deletions
diff --git a/tests/unit/slider/options.js b/tests/unit/slider/options.js index 923c3c1c9..8e43c3e89 100644 --- 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 index a9ec5324f..39bcd05c3 100644 --- a/tests/unit/slider/slider.html +++ b/tests/unit/slider/slider.html @@ -7,6 +7,16 @@ <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> @@ -14,6 +24,7 @@ <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 index b40a35e66..131f93fb0 100644 --- 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, |