Slider: Support for a range-theme

js/jquery.mobile.forms.slider.js

@@ -11,6 +11,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')"
 	},
@@ -28,8 +29,12 @@ $.widget( "mobile.slider", $.mobile.widget, {
 
 			theme = this.options.theme ? this.options.theme : parentTheme,
 
+			// theme of the outer track-bar
 			trackTheme = this.options.trackTheme ? this.options.trackTheme : parentTheme,
 
+		    // theme for the part between start & current slider position
+			rangeTheme = this.options.rangeTheme ? this.options.rangeTheme : trackTheme,
+
 			cType = control[ 0 ].nodeName.toLowerCase(),
 
 			selectClass = ( cType == "select" ) ? "ui-slider-switch" : "",
@@ -95,6 +100,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" );
 
@@ -265,6 +273,8 @@ $.widget( "mobile.slider", $.mobile.widget, {
 		if ( percent > 60 && cType === "select" ) {
 			// TODO: Dead path?
 		}
+
+		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" ),

js/jquery.mobile.listview.filter.js

@@ -44,8 +44,7 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
 
 			// Change val as lastval for next execution
 			$this.jqmData( "lastval" , val );
-
-			change = val.replace( new RegExp( "^" + lastval ) , "" );
+			change = val.substr( 0 , lastval.length + 1 ).replace( lastval , "" );
 
 			if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {
 

tests/unit/slider/index.html

@@ -47,6 +47,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

@@ -6,7 +6,7 @@
 	var onChangeCnt = 0;
 	window.onChangeCounter = function() {
 		onChangeCnt++;
-	}
+	};
 	module('jquery.mobile.slider.js');
 
 	var keypressTest = function(opts){
@@ -99,11 +99,20 @@
 		slider.keyup();
 		same(slider.val(), "200");
 	});
-	
+
 	test( "input type should degrade to number when slider is created", function(){
 		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((parseInt(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"),
@@ -155,8 +164,8 @@
 		$( "#onchange" ).slider( "refresh", 50 );
 		equals(onChangeCnt, 1, "onChange should have been called once");
 	});
-	
-	
+
+
 	test( "slider controls will create when inside a container that receives a 'create' event", function(){
 		ok( !$("#enhancetest").appendTo(".ui-page-active").find(".ui-slider").length, "did not have enhancements applied" );
 		ok( $("#enhancetest").trigger("create").find(".ui-slider").length, "enhancements applied" );

themes/default/jquery.mobile.forms.slider.css

@@ -7,6 +7,7 @@ label.ui-slider { display: block; }
 input.ui-slider-input  { display: inline-block; width: 50px; }
 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: 66%; }
+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){