MUA Slider Demo
Mootools (1.2.x) sliders without all the markup. See the source for options.
Vertical:
Horizontal:
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 */ }
var dual = new MUASlider('vertical0', {id:'slider0', mode: 'vertical', className: 'verticalslider', dual:true}); new MUASlider('vertical1', {mode: 'vertical', className: 'verticalslider'}); new MUASlider('vertical2', {id: 'slider2', range: [100,350], size: 350, mode:'vertical', className: 'verticalslider'}); new MUASlider('vertical3', {id: 'slider3', range: [0,200], areaClass: 'sliderarea-colorwheel', mode:'vertical', className: 'verticalslider'}); new MUASlider('horizontal0', {id: 'slider40', dual:true}); var single = new MUASlider('horizontal1', {id: 'slider4'}); new MUASlider('horizontal2', {id: 'slider5', range: [100,350], size: 350}); new MUASlider('horizontal3', {id: 'slider6', range: [0,200], areaClass: 'sliderarea-colorwheel'});