]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ec952e2)
Slider: Range fills all space after changing orientation
authorAblay Keldibek <atomio.ak@gmail.com>
Tue, 7 Apr 2015 14:10:27 +0000 (20:10 +0600)
committerScott González <scott.gonzalez@gmail.com>
Wed, 22 Apr 2015 16:55:54 +0000 (12:55 -0400)
Resets width/height of range

Fixes #12205
Closes gh-1533

tests/unit/slider/options.js patch | blob | history
tests/unit/slider/slider.html patch | blob | history
ui/slider.js patch | blob | history

diff --git a/tests/unit/slider/options.js b/tests/unit/slider/options.js
index 923c3c1c9af5cd438532efbac6d5edd2037f4881..8e43c3e8970c81ba59ee3c87aa3369047706ad27 100644 (file)
--- 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 a9ec5324f41def30dece7f78d208d4524d0a1175..39bcd05c3fe08944cfb3d6ef48b2ce969f3f84d8 100644 (file)
--- 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 b40a35e668d9a9bd2c86ecf9f10d170004f71ebd..131f93fb0693d22dd38786dca4391dd4bd7a769f 100644 (file)
--- 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,
The official jQuery user interface library: https://github.com/jquery/jquery-ui