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 );