range design

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<input data-theme ="a" class="ui-hidden-accessible" type="range" name="rangeInput" id="rangeInput" value="0" min="0" max="9" data-show-value="true" />

CSS

/*from structure*/
div.ui-slider {
	height: 60px;
	margin: .5em 0;
	padding: 0;
	-ms-touch-action: pan-y pinch-zoom double-tap-zoom;
    font-size:50px;
    font-weight:normal;
}

.ui-slider-track {
	position: relative;
	overflow: visible;
	border-width: 1px;
	border-style: solid;
	height: 5px;
	margin: 0 35px 0 35px;
    font-size:50px;
}

/* High level of specificity to override button margins in grids */
.ui-slider-track .ui-btn.ui-slider-handle {
	position: absolute;
	z-index: 1;
	top:50%;
	width: 60px;
	height: 60px;
	margin: -32px 0 0 -32px;
	outline: 0;
    line-height:60px;
}
.ui-slider-inneroffset {
	margin: 0 16px;
	position: relative;
	z-index: 1;
}

/* Button visited */
html head + body .ui-btn.ui-btn-a:visited {
	background-color: 			#f6f6f6 /*{a-bup-background-color}*/;
	border-color:	 		#ddd /*{a-bup-border}*/;
	color: 					#333 /*{a-bup-color}*/;
	text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
}