Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

clean branch for #2381

  • Loading branch information...
commit 6661f17c968261467c8d6b201a49d1ac409f0168 2 parents c716ab7 + ad6d040
Hans-Peter Buniat authored
1  css/structure/jquery.mobile.forms.slider.css 100644 → 100755
View
@@ -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){
15 docs/forms/slider/index.html
View
@@ -91,6 +91,21 @@
<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 -->
9 js/jquery.mobile.forms.slider.js 100644 → 100755
View
@@ -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" ),
4 tests/unit/slider/index.html 100644 → 100755
View
@@ -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>
9 tests/unit/slider/slider_events.js 100644 → 100755
View
@@ -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"),
Please sign in to comment.
Something went wrong with that request. Please try again.