Demo: slider

Example 01: A DHTML slider.

You can download the images here and here.

<!-- EXAMPLE 01 -->

<h3>Example 01: A DHTML slider.</h3>

<p>You can download the images <a href="pages/slider-demo/slider-line.png">here</a> and <a href="pages/slider-demo/slider-handle.png">here</a>.</p>

<div class="slider">
	<div id="slider-container">
		<input type="text" class="number" />
	</div>
</div>

/* EXAMPLE 01 */

.slider {
	width: 250px;
	margin-bottom: 12px;
	background: url(slider-line.png) no-repeat left top;
}

.slider-input {
	width: 238px;
	height: 24px;
}

.slider input {
	width: 20px;
	text-align: center;
	border: 0;
	margin: 5px 0 0 240px;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 10px;
	line-height: 10px;
	color: #AAAAAA;
}

.slider-input div.handle {
	background: url(slider-handle.png) no-repeat left top;
	cursor: pointer;
}

.slider-input div.handle div {
	width: 38px;
	height: 24px;
	font-size: 1px;
}

/* EXAMPLE 01 */

#slider-container input {
	slider: horizontal;
	slider-container: slider-container;
}