clean branch for jquery-archive#2381

Author: hpbuniat

css/structure/jquery.mobile.forms.slider.css

@@ -4,6 +4,7 @@ input.ui-slider-input,
 select.ui-slider-switch { display: none; }
 div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 60%; }
 div.ui-slider-switch { width: 99.8%; }
+div.ui-slider-range-background {height:15px; padding:0; margin: 0; border: none}
 a.ui-slider-handle { position: absolute; z-index: 10;  top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
 a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
 @media all and (min-width: 480px){

docs/forms/slider/index.html

@@ -91,6 +91,21 @@ <h2>Theming the slider</h2>
 			<label for="slider-2">Input slider:</label>
 			<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
 		</div>
+		
+        <p>By adding a <code>data-range-theme</code> attribute to the <code>input</code>, a separate swatch is set for the track between the start- and the handles position.</p>
+
+        <pre><code>
+&lt;div data-role=&quot;fieldcontain&quot;&gt;
+    &lt;label for=&quot;slider-3&quot;&gt;Input slider:&lt;/label&gt;
+    &lt;input type=&quot;range&quot; name=&quot;slider-3&quot; id=&quot;slider-3&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; <strong>data-theme=&quot;a&quot; data-range-theme=&quot;b&quot;</strong> /&gt;
+&lt;/div&gt;
+        </code></pre>
+
+        <p>This will produce a themed slider:</p>
+        <div data-role="fieldcontain">
+            <label for="slider-3">Input slider:</label>
+            <input type="range" name="slider-3" id="slider-3" value="25" min="0" max="100" data-theme="a" data-range-theme="b" />
+        </div>
 		</form>
 	</div><!--/content-primary -->
 

js/jquery.mobile.forms.slider.js

@@ -8,6 +8,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
 	options: {
 		theme: null,
 		trackTheme: null,
+		rangeTheme: null,
 		disabled: false,
 		initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"
 	},
@@ -23,8 +24,12 @@ $.widget( "mobile.slider", $.mobile.widget, {
 
 			theme = this.options.theme || parentTheme,
 
+			// theme of the outer track-bar
 			trackTheme = this.options.trackTheme || parentTheme,
 
+		    // theme for the part between start & current slider position
+			rangeTheme = this.options.rangeTheme || trackTheme,
+
 			cType = control[ 0 ].nodeName.toLowerCase(),
 
 			selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",
@@ -94,6 +99,9 @@ $.widget( "mobile.slider", $.mobile.widget, {
 			});
 
 		}
+		else if (trackTheme != rangeTheme) {
+		    slider.wrapInner( "<div class='ui-slider-range-background ui-btn-down-" + rangeTheme + " ui-btn-corner-all' role='application'></div>" );
+		}
 
 		label.addClass( "ui-slider" );
 
@@ -307,6 +315,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
 			newval = max;
 		}
 
+		this.slider.find('div.ui-slider-range-background').css('width', percent + "%");
 		this.handle.css( "left", percent + "%" );
 		this.handle.attr( {
 				"aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),

tests/unit/slider/index.html

@@ -50,6 +50,10 @@ <h2 id="qunit-userAgent"></h2>
 		<input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10"  data-nstest-theme="b" data-nstest-track-theme="a" />
 	</div>
 
+    <div  data-nstest-role="fieldcontain">
+        <input type="range" name="range-background" id="range-background" value="15" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" data-nstest-range-theme="c" />
+    </div>
+
 	<div  data-nstest-role="fieldcontain">
 		<select name="slider" id="slider-switch"  data-nstest-role="slider">
 			<option value="off">Off</option>

tests/unit/slider/slider_events.js

@@ -110,6 +110,15 @@
 		same($("#range-slider-up").attr( "type" ), "number");
 	});
 
+    test( "slider with range-background theme should have a inner range-div with corresponding theme and width", function(){
+        var slider = $("#range-background");
+        slider.focus();
+        same(slider.val(), "15");
+        var backgroundDiv = slider.next().find('.ui-slider-range-background');
+        same((Math.round(100 * parseFloat(backgroundDiv.css('width')) / parseFloat(backgroundDiv.parent().css('width')) ) + '%'), '15%');
+        ok(backgroundDiv.hasClass('ui-btn-down-c'));
+    });
+
 	// generic switch test function
 	var sliderSwitchTest = function(opts){
 		var slider = $("#slider-switch"),