/* * 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%; } }