Permalink
Browse files

Range widget: re-thought positioning of sliders and use of css

  • Loading branch information...
1 parent a2c564f commit ed13924c14c567a8cd64e895d8f309014c980ade Alexander Schmitz committed Nov 27, 2012
@@ -3,77 +3,62 @@
display:inline-block;
clear:right;
min-height:1em;
- width:78%;
+ width:100%;
}
.ui-range div.ui-slider{
position:absolute;
- left:100px;
- float:left;
- margin-left:3.7em;
- box-sizing:border-box;
- margin-top:.45em;
- max-width:80%;
- width:100%;
- margin-right:18px;
+ left:0;
+ top:0;
+ width:95%;
}
-.ui-field-contain .ui-range div.ui-slider{
- width:45%;
+.ui-range label.ui-slider{
+ font-weight: bold;
+ color: #222 /*{c-bup-color}*/;
+ text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #fff /*{c-bup-shadow-color}*/;
+ display:inline-block;
+ margin-right:3px;
}
-.ui-range div.ui-slider:last-child{
- margin-left:.9em;
+.ui-range-sliders{
+ position:relative;
+ display:inline-block;
+ width:60%;
+ min-height:1em;
}
-.ui-range.ui-range-split{
- margin-left:70px;
+.ui-range-inputs{
+ position:relative;
+ display:inline-block;
}
-.ui-range input{
- float:left;
- margin-right:5px;
+.ui-range.ui-range-full .ui-range-sliders{
+ width:100%;
}
-.ui-range input.ui-range-first{
- margin-left:-140px;
+/*field-contain styling*/
+.ui-field-contain .ui-range label.ui-slider{
+ width:20%;
+ font-weight:normal;
+ margin: 0 2% 0 0;
+ display:inline-block;
}
-.ui-range.ui-range-split input.ui-range-first,
-.ui-range input.ui-range-last{
- margin-left:-70px;
+.ui-field-contain .ui-range .ui-range-inputs{
+ width:100%;
+ white-space: nowrap;
}
-.ui-range div.ui-slider:last-child{
- position:relative;
- left:0px;
+.ui-field-contain .ui-range .ui-range-sliders{
+ width:59%;
+ position:absolute;
+ right:0;
+ margin-top:5px;
}
-.ui-field-contain .ui-range input.ui-slider-input{
- margin-right:.5em;
+.ui-field-contain .ui-range div.ui-range-sliders div.ui-slider{
+ width:70%;
+ margin-left:25%;
}
-@media (max-width: 450px){
- .ui-range{
- width:100%;
- }
- .ui-field-contain .ui-range div.ui-slider{
- width:100%;
- left:0;
- top:50%;
- margin-top:1.05em;
- margin-left:1.35em;
- }
- .ui-field-contain .ui-range div.ui-slider:last-child{
- margin-top:.75em;
- }
- .ui-range{
- margin-bottom:8px;
- }
+.ui-field-contain .ui-range div.ui-range-sliders div.ui-slider.ui-slider-mini{
+ margin-top:.5em;
}
-@media (max-width: 750px){
-
- .content-primary .ui-field-contain .ui-range div.ui-slider{
- width:100%;
- left:0;
- top:50%;
- margin-top:1.05em;
- margin-left:1.35em;
- }
- .ui-field-contain .ui-range div.ui-slider:last-child{
- margin-top:.75em;
- }
- .ui-range{
- margin-bottom:8px;
+@media (max-width: 28em) {
+ .ui-field-contain .ui-range div.ui-range-sliders div.ui-slider{
+ width:90%;
+ margin-left:0;
}
}
+
@@ -458,3 +458,23 @@ ul.bullet li { list-style:square; padding:.4em 0; margin-left:1.2em; border-bott
.ui-mobile-viewport .localnav li {
border: none;
}
+
+/* range slider examples */
+@media (max-width: 750px){
+
+ .content-primary .ui-field-contain .ui-range div.ui-range-sliders{
+ width:100%;
+ position:relative;
+ top:1em;
+ margin-bottom:1em;
+ }
+ .content-primary .ui-field-contain .ui-range.ui-mini div.ui-range-sliders{
+ top:-.3em;
+ margin-bottom:0;
+ }
+ .content-primary .ui-range div.ui-sliders{
+ width:65%;
+ margin-left:30%;
+ }
+}
+
@@ -58,7 +58,13 @@
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" data-mini="true" />
</div>
-
+ <div data-role="fieldcontain">
+ <div data-role="range" data-highlight="true" data-mini="true" >
+ <label for="range">Range:</label>
+ <input type="range" name="range_min" id="range_min" value="0" min="0" max="100"/>
+ <input type="range" name="range_max" id="range_max" value="100" min="0" max="100"/>
+ </div>
+ </div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<legend>Choose as many snacks as you'd like:</legend>
@@ -62,6 +62,14 @@
</div>
<div data-role="fieldcontain">
+ <div data-role="none" data-highlight="true">
+ <label for="range">Range:</label>
+ <input type="range" name="range_min" id="range_min" value="0" min="0" max="100" data-role="none"/>
+ <input type="range" name="range_max" id="range_max" value="100" min="0" max="100" data-role="none"/>
+ </div>
+ </div>
+
+ <div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
View
@@ -60,10 +60,12 @@
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
- <div data-role="range" data-highlight="true">
- <label for="range">Range:</label>
- <input type="range" name="range_min" id="range_min" value="0" min="0" max="100"/>
- <input type="range" name="range_max" id="range_max" value="100" min="0" max="100"/>
+ <div data-role="fieldcontain">
+ <div data-role="range" data-highlight="true">
+ <label for="range">Range:</label>
+ <input type="range" name="range_min" id="range_min" value="0" min="0" max="100"/>
+ <input type="range" name="range_max" id="range_max" value="100" min="0" max="100"/>
+ </div>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
View
@@ -17,11 +17,11 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
disabled: false,
initSelector: ":jqmData(role='range')",
mini: false,
- highlight: true
+ highlight: false
},
_create: function() {
- var inputFirst, inputLast, sliderFirst, sliderLast, sliderLastWidth, sliderFirstWidth, label, wrap,
+ var inputFirst,inputs,sliders, inputLast, sliderFirst, sliderLast, sliderLastWidth, sliderFirstWidth, label,
self = this,
$el = self.element,
o = this.options;
@@ -31,9 +31,19 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
inputFirst.addClass( "ui-range-first" );
inputLast.addClass( "ui-range-last" );
label = $el.find( "label" );
- $el.wrap( "<div class=\"ui-range-wrap ui-field-contain\" />" );
- wrap = $el.closest( ".ui-range-wrap" );
- label.prependTo(wrap).addClass( "ui-slider" );
+ //$el.wrap( "<div class=\"ui-range-wrap\" />" );
+ //wrap = $el.closest( ".ui-range-wrap" );
+ $el.append("<div class=\"ui-range-inputs\" />").append("<div class=\"ui-range-sliders\" />");
+ inputs = $el.find(".ui-range-inputs");
+ sliders = $el.find(".ui-range-sliders");
+
+ inputFirst.appendTo( inputs );
+ inputs.append(" - ");
+ inputLast.appendTo( inputs );
+ if( o.mini ){
+ label.addClass("ui-mini");
+ self.element.addClass("ui-mini");
+ }
$el.find( "input" ).slider({
theme: o.theme,
trackTheme: o.trackTheme,
@@ -44,22 +54,20 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
$el.addClass( "ui-range" );
sliderFirst = $el.find( ".ui-slider:first" ).addClass( "ui-slider-first" );
sliderLast = $el.find( ".ui-slider:last" ).addClass( "ui-slider-last" );
-
+ sliderFirst.appendTo(sliders);
+ sliderLast.appendTo(sliders);
+ label.prependTo(inputs).addClass( "ui-slider" );
$.extend( self, {
inputFirst: inputFirst,
inputLast: inputLast,
label: label,
- wrap: wrap,
sliderFirst: sliderFirst,
sliderLast: sliderLast,
sliderFirstWidth: sliderFirstWidth,
sliderLastWidth: sliderLastWidth
});
- $(function(){
- self.sliderFirstWidth = sliderFirst.find( ".ui-slider-bg" ).width();
- self.sliderLastWidth = sliderLast.find( ".ui-slider-bg" ).width();
- });
+ self._bindResize();
self._bindChangeEvents();
self._bindToggle();
},
@@ -83,6 +91,21 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
});
},
+ _bindResize: function() {
+ var self = this,delay;
+ this._on( this.element.closest(".ui-page") , {
+ "pageshow": function(){
+ self.sliderFirstWidth = self.sliderFirst.find( ".ui-slider-bg" ).width();
+ self.sliderLastWidth = self.sliderLast.find( ".ui-slider-bg" ).width();
+ }
+ });
+ this._on( window , {
+ "throttledresize": function(event){
+ self.sliderLastWidth = self.sliderLast.find( ".ui-slider-bg" ).width();
+ }
+ });
+ },
+
_bindToggle: function() {
this._on( this.element.find( ".ui-slider-handle" ), {
"vclick": function( event ){
@@ -95,7 +118,6 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
_updateHighlight: function() {
var newWidth = this.sliderLastWidth - this.sliderFirstWidth,
tWidth = this.sliderLast.width();
- console.log(newWidth);
this.element.find( ".ui-slider-bg" ).css({
"margin-left": parseInt(this.sliderFirstWidth / tWidth * 100) + "%",
"width": parseInt((newWidth) / tWidth * 100) + "%"
@@ -368,6 +368,15 @@ $.widget( "mobile.slider", $.mobile.widget, {
return $( bg ).prependTo( self.slider );
})()
}
+
+ if(self.options.mini){
+ self.slider.addClass( "ui-slider-mini" );
+ self.element.addClass( "ui-mini" );
+ } else {
+ self.slider.removeClass( "ui-slider-mini" );
+ self.element.removeClass( "ui-mini" );
+ }
+
var control = this.element, percent,
isInput = !this.isToggleSwitch,
optionElements = isInput ? [] : control.find( "option" ),

0 comments on commit ed13924

Please sign in to comment.