Slider: factorize code with Widget method call. Fixed #8772 - Wrong slider UI state when disabled at init

Author: Samuel Bovée

tests/unit/slider/slider_methods.js

@@ -41,10 +41,10 @@ test("enable", function() {
 	equal(actual, expected, 'enable is chainable');
 
 	el = $('<div></div>').slider({ disabled: true });
-	ok(el.hasClass('ui-disabled'), 'slider has ui-disabled class before enable method call');
+	ok(el.hasClass('ui-state-disabled'), 'slider has ui-state-disabled class before enable method call');
 	ok(el.hasClass('ui-slider-disabled'), 'slider has ui-slider-disabled class before enable method call');
 	el.slider('enable');
-	ok(!el.hasClass('ui-disabled'), 'slider does not have ui-disabled class after enable method call');
+	ok(!el.hasClass('ui-state-disabled'), 'slider does not have ui-state-disabled class after enable method call');
 	ok(!el.hasClass('ui-slider-disabled'), 'slider does not have ui-slider-disabled class after enable method call');
 });
 
@@ -56,10 +56,10 @@ test("disable", function() {
 	equal(actual, expected, 'disable is chainable');
 
 	el = $('<div></div>').slider({ disabled: false });
-	ok(!el.hasClass('ui-disabled'), 'slider does not have ui-disabled class before disabled method call');
+	ok(!el.hasClass('ui-state-disabled'), 'slider does not have ui-state-disabled class before disabled method call');
 	ok(!el.hasClass('ui-slider-disabled'), 'slider does not have ui-slider-disabled class before disable method call');
 	el.slider('disable');
-	ok(el.hasClass('ui-disabled'), 'slider has ui-disabled class after disable method call');
+	ok(el.hasClass('ui-state-disabled'), 'slider has ui-state-disabled class after disable method call');
 	ok(el.hasClass('ui-slider-disabled'), 'slider has ui-slider-disabled class after disable method call');
 });
 

ui/jquery.ui.slider.js

@@ -54,8 +54,7 @@ $.widget( "ui.slider", $.ui.mouse, {
 				" ui-slider-" + this.orientation +
 				" ui-widget" +
 				" ui-widget-content" +
-				" ui-corner-all" +
-				( o.disabled ? " ui-slider-disabled ui-disabled" : "" ) );
+				" ui-corner-all");
 
 		this.range = $([]);
 
@@ -116,6 +115,8 @@ $.widget( "ui.slider", $.ui.mouse, {
 			$( this ).data( "ui-slider-handle-index", i );
 		});
 
+		this._setOption( "disabled", o.disabled );
+
 		this._on( this.handles, {
 			keydown: function( event ) {
 				var allowed, curVal, newVal, step,
@@ -205,7 +206,6 @@ $.widget( "ui.slider", $.ui.mouse, {
 			.removeClass( "ui-slider" +
 				" ui-slider-horizontal" +
 				" ui-slider-vertical" +
-				" ui-slider-disabled" +
 				" ui-widget" +
 				" ui-widget-content" +
 				" ui-corner-all" );
@@ -480,10 +480,8 @@ $.widget( "ui.slider", $.ui.mouse, {
 					this.handles.filter( ".ui-state-focus" ).blur();
 					this.handles.removeClass( "ui-state-hover" );
 					this.handles.prop( "disabled", true );
-					this.element.addClass( "ui-disabled" );
 				} else {
 					this.handles.prop( "disabled", false );
-					this.element.removeClass( "ui-disabled" );
 				}
 				break;
 			case "orientation":