diff --git a/js/widgets/forms/rangeslider.js b/js/widgets/forms/rangeslider.js index 51268f50cb7..bfab6f48c49 100644 --- a/js/widgets/forms/rangeslider.js +++ b/js/widgets/forms/rangeslider.js @@ -143,6 +143,11 @@ define( [ "jquery", if ( options.highlight !== undefined ) { this._setHighlight( options.highlight ); } + + if ( options.disabled !== undefined ) { + this._setDisabled( options.disabled ); + } + this._super( options ); this.refresh(); }, @@ -249,6 +254,13 @@ define( [ "jquery", this._inputLast.slider( "option", "highlight", value ); }, + _setDisabled: function( value ) { + value = !!value; + + this._inputFirst.prop( "disabled", value ); + this._inputLast.prop( "disabled", value ); + }, + _destroy: function() { this._label.prependTo( this.element ); this.element.removeClass( "ui-rangeslider ui-mini" ); diff --git a/tests/unit/rangeslider/index.html b/tests/unit/rangeslider/index.html index 6fa0e54f6fa..eca06118203 100644 --- a/tests/unit/rangeslider/index.html +++ b/tests/unit/rangeslider/index.html @@ -52,6 +52,10 @@ +
+ + +
diff --git a/tests/unit/rangeslider/rangeslider_core.js b/tests/unit/rangeslider/rangeslider_core.js index c3526d5b77d..b8713cb9dd5 100644 --- a/tests/unit/rangeslider/rangeslider_core.js +++ b/tests/unit/rangeslider/rangeslider_core.js @@ -95,4 +95,42 @@ ); }); + test( " Rangeslider is enabled/disabled correctly ", function() { + var rangeslider = $( "#disable-rangeslider" ), + inputFirst = $( "#range-disabled-first" ), + inputLast = $( "#range-disabled-last" ), + sliderFirst = rangeslider.find( ".ui-slider-track" ).first(), + sliderLast = rangeslider.find( ".ui-slider-track" ).first(); + + rangeslider.rangeslider( { disabled: true } ); + + ok( !!inputFirst.attr( "disabled" ), "first input is disabled" ); + ok( inputFirst.hasClass( "mobile-slider-disabled"), + "first input gets mobile-slider-disabled" ); + ok( !!sliderFirst.attr( "aria-disabled" ), "first slider is aria-disabled" ); + ok( sliderFirst.hasClass( "ui-state-disabled"), "first slider has ui-state-disabled" ); + ok( !!inputLast.attr( "disabled" ), "last input is disabled" ); + ok( inputLast.hasClass( "mobile-slider-disabled"), + "last input gets mobile-slider-disabled" ); + ok( !!sliderLast.attr( "aria-disabled" ), "last slider is aria-disabled" ); + ok( sliderLast.hasClass( "ui-state-disabled"), "last slider has ui-state-disabled" ); + + rangeslider.rangeslider( {disabled: false } ); + + deepEqual( !!inputFirst.attr( "disabled" ), false, "first input is enabled" ); + ok( !inputFirst.hasClass( "mobile-slider-disabled"), + "first input gets mobile-slider-disabled" ); + deepEqual( sliderFirst.attr( "aria-disabled" ), "false", + "first slider aria-disabled is false" ); + ok( !sliderFirst.hasClass( "ui-state-disabled"), "first slider ui-state-disabled removed" ); + deepEqual( !!inputLast.attr( "disabled" ), false, "last input is enabled" ); + ok( !inputLast.hasClass( "mobile-slider-disabled"), + "last input gets mobile-slider-disabled" ); + deepEqual( sliderLast.attr( "aria-disabled" ), "false", + "last slider aria-disabled is false" ); + ok( !sliderLast.hasClass( "ui-state-disabled"), "last slider ui-state-disabled removed" ); + + + }); + })( jQuery );