jquery-mobile/css/jQuery.mobile.forms.slider.css

/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
label.ui-slider { display: block; }
input.ui-slider-input, select.ui-slider-select { display: inline-block; width: 40px; }
select.ui-slider-select { width: 60px; /*commented out for demo purposes... 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-select { height: 36px; width: 50%;  }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 49%; }
div.ui-slider-labels { overflow: hidden; }
div.ui-slider-label { float: left; text-align: center; height: 36px; line-height: 36px;  }
a.ui-slider-handle { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -13px; margin-left: -13px; }
div.ui-slider-select a.ui-slider-handle { width: 100%; height: 32px; margin-top: -18px; margin-left: -100%;  }
a.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
@media screen and (min-width: 480px){ 
	label.ui-slider { display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
	div.ui-slider { width: 45%; }
}
First pass at a simple slider plugin. Can be called on an input element with data-role="slider". Controls communicate both ways during use. 2010-09-21 19:25:23 +00:00			`/*`
			`* jQuery Mobile Framework`
			`* Copyright (c) jQuery Project`
			`* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.`
			`*/`
more updates to slider css and js. Should have itemized commits, but this thing's still in first-pass status. 2010-09-21 20:07:23 +00:00			`label.ui-slider { display: block; }`
extended slider to support simple toggle switches based on select menus. The logic will actually support multi-option selects as well, but the labels are flipped in order for switch-style controls, so if we want to support regular sliders from selects, the labels will have to be in forward order and beneath the slider bar. 2010-09-23 16:51:23 +00:00			`input.ui-slider-input, select.ui-slider-select { display: inline-block; width: 40px; }`
			`select.ui-slider-select { width: 60px; /commented out for demo purposes... display: none; / }`
took the width of the slider track down a tad 2010-09-21 20:09:58 +00:00			`div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }`
extended slider to support simple toggle switches based on select menus. The logic will actually support multi-option selects as well, but the labels are flipped in order for switch-style controls, so if we want to support regular sliders from selects, the labels will have to be in forward order and beneath the slider bar. 2010-09-23 16:51:23 +00:00			`div.ui-slider-select { height: 36px; width: 50%; }`
			`div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 49%; }`
			`div.ui-slider-labels { overflow: hidden; }`
			`div.ui-slider-label { float: left; text-align: center; height: 36px; line-height: 36px; }`
			`a.ui-slider-handle { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -13px; margin-left: -13px; }`
			`div.ui-slider-select a.ui-slider-handle { width: 100%; height: 32px; margin-top: -18px; margin-left: -100%; }`
			`a.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }`
more updates to slider css and js. Should have itemized commits, but this thing's still in first-pass status. 2010-09-21 20:07:23 +00:00			`@media screen and (min-width: 480px){`
			`label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }`
took the width of the slider track down a tad 2010-09-21 20:09:58 +00:00			`div.ui-slider { width: 45%; }`
more updates to slider css and js. Should have itemized commits, but this thing's still in first-pass status. 2010-09-21 20:07:23 +00:00			`}`