js/widgets/forms/rangeslider.js

@@ -5,15 +5,21 @@
 //>>css.structure: ../css/structure/jquery.mobile.forms.rangeslider.css
 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
 
-define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "./textinput", "../../jquery.mobile.buttonMarkup", "./reset", "./slider" ], function( jQuery ) {
+define( [ "jquery",
+	"../../jquery.mobile.core",
+	"../../jquery.mobile.widget",
+	"./textinput",
+	"../../jquery.mobile.buttonMarkup",
+	"./reset",
+	"../optionDemultiplexer",
+	"./slider" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 	$.widget( "mobile.rangeslider", $.mobile.widget, $.extend( {
 
 		options: {
 			theme: null,
 			trackTheme: null,
-			disabled: false,
 			initSelector: ":jqmData(role='rangeslider')",
 			mini: false,
 			highlight: true
@@ -29,7 +35,7 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
 			_sliderFirst = $.data( _inputFirst.get(0), "mobileSlider" ).slider,
 			_sliderLast = $.data( _inputLast.get(0), "mobileSlider" ).slider,
 			firstHandle = $.data( _inputFirst.get(0), "mobileSlider" ).handle,
-			_sliders = $( "<div class=\"ui-rangeslider-sliders\" />" ).appendTo( $el );
+			_sliders = $( "<div class='ui-rangeslider-sliders' />" ).appendTo( $el );
 
 			if ( $el.find( "label" ).length > 1 ) {
 				secondLabel = $el.find( "label" ).last().hide();
@@ -204,6 +210,27 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
 			});
 		},
 
+		_setTheme: function( value ) {
+			this._inputFirst.slider( "option", "theme", value );
+			this._inputLast.slider( "option", "theme", value );
+		},
+
+		_setTrackTheme: function( value ) {
+			this._inputFirst.slider( "option", "trackTheme", value );
+			this._inputLast.slider( "option", "trackTheme", value );
+		},
+
+		_setMini: function( value ) {
+			this._inputFirst.slider( "option", "mini", value );
+			this._inputLast.slider( "option", "mini", value );
+			this.element.toggleClass( "ui-mini", !!value );
+		},
+
+		_setHighlight: function( value ) {
+			this._inputFirst.slider( "option", "highlight", value );
+			this._inputLast.slider( "option", "highlight", value );
+		},
+
 		_destroy: function() {
 			this.element.removeClass( "ui-rangeslider ui-mini" ).find( "label" ).show();
 			this._inputFirst.after( this._sliderFirst );
@@ -212,7 +239,7 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
 			this.element.find( "input" ).removeClass( "ui-rangeslider-first ui-rangeslider-last" ).slider( "destroy" );
 		}
 
-	}, $.mobile.behaviors.formReset ) );
+	}, $.mobile.behaviors.formReset, $.mobile.behaviors.optionDemultiplexer ) );
 
 //auto self-init widgets
 $( document ).bind( "pagecreate create", function( e ) {

js/widgets/forms/slider.js

@@ -5,7 +5,13 @@
 //>>css.structure: ../css/structure/jquery.mobile.forms.slider.css
 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
 
-define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "./textinput", "../../jquery.mobile.buttonMarkup", "./reset" ], function( jQuery ) {
+define( [ "jquery",
+	"../../jquery.mobile.core",
+	"../../jquery.mobile.widget",
+	"./textinput",
+	"../../jquery.mobile.buttonMarkup",
+	"../optionDemultiplexer",
+	"./reset" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 
@@ -15,7 +21,6 @@ $.widget( "mobile.slider", $.mobile.widget, $.extend( {
 	options: {
 		theme: null,
 		trackTheme: null,
-		disabled: false,
 		initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')",
 		mini: false,
 		highlight: false
@@ -357,7 +362,7 @@ $.widget( "mobile.slider", $.mobile.widget, $.extend( {
 			left, width, data, tol;
 
 		self.slider[0].className = [ this.isToggleSwitch ? "ui-slider ui-slider-switch" : "ui-slider-track"," ui-btn-down-" + trackTheme,' ui-btn-corner-all', ( this.options.mini ) ? " ui-mini":""].join( "" );
-		if ( this.options.disabled || this.element.attr( "disabled" ) ) {
+		if ( this.options.disabled || this.element.prop( "disabled" ) ) {
 			this.disable();
 		}
 
@@ -490,19 +495,43 @@ $.widget( "mobile.slider", $.mobile.widget, $.extend( {
 		}
 	},
 
-	enable: function() {
-		this.element.attr( "disabled", false );
-		this.slider.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
-		return this._setOption( "disabled", false );
+	_setHighlight: function( value ) {
+		value = !!value;
+		if ( value ) {
+			this.options.highlight = !!value;
+			this.refresh();
+		} else if ( this.valuebg ) {
+			this.valuebg.remove();
+			this.valuebg = false;
+		}
 	},
 
-	disable: function() {
-		this.element.attr( "disabled", true );
-		this.slider.addClass( "ui-disabled" ).attr( "aria-disabled", true );
-		return this._setOption( "disabled", true );
-	}
+	_setMini: function( value ) {
+		value = !!value;
+		if ( !this.isToggleSwitch && !this.isRangeslider ) {
+			this.slider.parent().toggleClass( "ui-mini", value );
+			this.element.toggleClass( "ui-mini", value );
+		}
+		this.slider.toggleClass( "ui-mini", value );
+	},
+
+	_setTheme: function( value ) {
+		this.handle.buttonMarkup( { theme: value } );
+	},
+
+	_setTrackTheme: function( value ) {
+		this.slider
+			.removeClass( "ui-btn-down-" + this.options.trackTheme )
+			.addClass( "ui-btn-down-" + value );
+	},
+
+	_setDisabled: function( value ) {
+		value = !!value;
+		this.element.prop( "disabled", value );
+		this.slider.toggleClass( "ui-disabled", value ).attr( "aria-disabled", value );
+	},
 
-}, $.mobile.behaviors.formReset ) );
+}, $.mobile.behaviors.formReset, $.mobile.behaviors.optionDemultiplexer ) );
 
 //auto self-init widgets
 $.mobile.document.bind( "pagecreate create", function( e ) {