MUA Slider Demo

Mootools (1.2.x) sliders without all the markup. See the source for options.

Vertical:

Horizontal:

fieldset{ height: 400px;}
#vertical { float: left; width: 150px; margin-right: 40px;  }
.verticalslider { float: left; margin-left: 20px; }

.slider {
	clear: both;
	position: relative;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 15px;	
}

.sliderWrapper {
	position: relative;
	font-size: 1px;
	line-height: 1px;
}

.sliderarea {
	top: 0;
	left: 0;
	height: 7px;
	font-size: 1px;
	line-height: 1px;
	background: #f2f2f2 url(../images/slider-area.gif) repeat-x;
	border: 1px solid #a3a3a3;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 1;
}
.sliderarea.vertical { background: #f2f2f2 url(../images/slider-area-vertical.gif) repeat-y; }
 
.sliderknob {
	top: 0;
	left: 0;
	height: 9px;
	margin-top: -9px; /* height of knob */
	width: 19px;
	font-size: 1px;
	line-height: 1px;	
	background: url(../images/knob.gif) no-repeat;
	cursor: pointer;
	overflow: hidden;
	z-index: 2;
}
.sliderknob.vertical{ background: url(../images/knob-vertical.gif) no-repeat; height: 19px; width: 9px;}
	
.sliderclear { clear: both; }

.sliderarea-colorwheel { 
	top: 0;
	left: 0;
	height: 7px;
	font-size: 1px;
	line-height: 1px;
	background: #f2f2f2 url(../images/slider-area.gif) repeat-x;
	border: 1px solid #a3a3a3;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 1;
	background: #f2f2f2; 
	background: -moz-linear-gradient(left, #f93f31 0%, #fff130 20%, #28ff2f 40%, #28fffb 60%, #ed28ff 80%, #2850ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f93f31), color-stop(20%,#fff130), color-stop(40%,#28ff2f), color-stop(60%,#28fffb), color-stop(80%,#ed28ff), color-stop(100%,#2850ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F93F31', endColorstr='#2850FF',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* W3C */
}
.sliderarea-colorwheel.vertical { 
	background: -moz-linear-gradient(top, #f93f31 0%, #fff130 20%, #28ff2f 40%, #28fffb 60%, #ed28ff 80%, #2850ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f93f31), color-stop(20%,#fff130), color-stop(40%,#28ff2f), color-stop(60%,#28fffb), color-stop(80%,#ed28ff), color-stop(100%,#2850ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F93F31', endColorstr='#2850FF',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #f93f31 0%,#fff130 20%,#28ff2f 40%,#28fffb 60%,#ed28ff 80%,#2850ff 100%); /* W3C */
}