Rangeslider: Allow enabling after disabling

Fixes gh-7547
Closes gh-7621

(cherry picked from commit fc0acb5)

Author: cgack

js/widgets/forms/rangeslider.js

@@ -144,6 +144,11 @@ define( [ "jquery",
 			if ( options.highlight !== undefined ) {
 				this._setHighlight( options.highlight );
 			}
+
+			if ( options.disabled !== undefined ) {
+				this._setDisabled( options.disabled );
+			}
+
 			this._super( options );
 			this.refresh();
 		},
@@ -250,6 +255,11 @@ define( [ "jquery",
 			this._inputLast.slider( "option", "highlight", value );
 		},
 
+		_setDisabled: function( 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" );

tests/unit/rangeslider/index.html

@@ -58,6 +58,10 @@
 					<input type="range" name="rangeslider-last" id="rangeslider-startstop-last" value="100" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
 				</div>
 			</div>
+			<div data-nstest-role="rangeslider" id="disable-rangeslider">
+			    <input name="range-disabled-first" id="range-disabled-first" min="0" max="100" value="0" type="range">
+			    <input name="range-disabled-last" id="range-disabled-last" min="0" max="100" value="100" type="range">
+			</div>
 		</form>
 	</div>
 

tests/unit/rangeslider/rangeslider_core.js

@@ -129,5 +129,40 @@
 
 		], 50)
 	});
+	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 );