From 4b08e0fc9d6241a57679e2ee8d07cd7cd0e56f61 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 11 Oct 2010 16:55:10 -0400
Subject: [PATCH] enabled theming of sliders through data-theme. Fixes #152
 Fixes #153

---
 _form-controls.html              | 9 +++++++--
 js/jquery.mobile.forms.slider.js | 9 ++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/_form-controls.html b/_form-controls.html
index afb0f8e8..02dd60db 100644
--- a/_form-controls.html
+++ b/_form-controls.html
@@ -59,6 +59,11 @@
 		 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
 		</div>
 		
+		<div data-role="fieldcontain">
+			<label for="slider1">Input slider:</label>
+		 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
+		</div>
+		
 		<div data-role="fieldcontain">
 			<label for="slider2">Select slider:</label>
 			<select name="slider2" id="slider2" data-role="slider">
@@ -68,8 +73,8 @@
 		</div>
 		
 		<div data-role="fieldcontain">
-			<label for="slider3">Another select slider:</label>
-			<select name="slider3" id="slider3" data-role="slider">
+			<label for="slider3">Themed select slider:</label>
+			<select name="slider3" id="slider3" data-role="slider" data-theme="a">
 				<option value="off">Off</option>
 				<option value="on" selected="selected">On</option>
 			</select> 
diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
index 65b34c45..93f01bf6 100644
--- a/js/jquery.mobile.forms.slider.js
+++ b/js/jquery.mobile.forms.slider.js
@@ -8,6 +8,9 @@
 $.fn.slider = function(options){
 	return this.each(function(){	
 		var control = $(this),
+			o = $.extend({
+				theme: control.data("theme") || 'c'
+			},options),
 			cType = control[0].nodeName.toLowerCase(),
 			selectClass = (cType == 'select') ? 'ui-slider-switch' : '',
 			controlID = control.attr('id'),
@@ -18,10 +21,10 @@ $.fn.slider = function(options){
 			max = (cType == 'input') ? parseFloat(control.attr('max')) : control.find('option').length-1,
 			percent = val / (max - min) * 100,
 			snappedPercent = percent,
-			slider = $('<div class="ui-slider '+ selectClass +' ui-bar-c ui-btn-corner-all" role="application"></div>'),
+			slider = $('<div class="ui-slider '+ selectClass +' ui-bar-'+o.theme+' ui-btn-corner-all" role="application"></div>'),
 			handle = $('<a href="#" class="ui-slider-handle"></a>')
 				.appendTo(slider)
-				.buttonMarkup({corners: true, theme: 'c', shadow: true})
+				.buttonMarkup({corners: true, theme: o.theme, shadow: true})
 				.attr({
 					'role': 'slider',
 					'aria-valuemin': min,
@@ -40,7 +43,7 @@ $.fn.slider = function(options){
 			control.find('option').each(function(i){
 				var side = (i==0) ?'b':'a',
 					corners = (i==0) ? 'right' :'left',
-					theme = (i==0) ?'c':'b';
+					theme = (i==0) ? o.theme :'b';
 				$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);	
 				$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'" role="img">'+$(this).text()+'</span>').prependTo(handle);
 			});