mootools

References to Documentation

1. http://docs.mootools.net/Plugins/Slider.js#Slider
2. Native/Element.js#$
3. Native/Element.js#Element.setHTML
4. Plugins/Slider.js#Slider.set

/* Slider 1 */
var mySlide = new Slider($('area'), $('knob'), {
	steps: 480,
	onChange: function(step){
		$('upd').setHTML(step);
	}
}).set(0);
 
$('knob2').setOpacity(0.5);
 
/* Slider 2 */
var mySlide2 = new Slider($('area2'), $('knob2'), {
	steps: 20,	
	offset: 5,
	onChange: function(pos){
		$('upd2').setHTML(pos);
	}
 
}).set(8);
 
/* Slider 3 */
var mySlide3 = new Slider($('area3'), $('knob3'), {	
	steps: 280,	
	mode: 'vertical',	
	onChange: function(step){
		$('upd3').setHTML(step);
	}
}).set(0);

<h3>Slider 1</h3>
<div id="console"></div><div id="console2"></div>
<div id="area">
	<div id="knob"></div>
</div>
<p id="upd">XX</p>
 
<h3>Slider 2</h3>
<p>This slider has as option offset: 5</p>
<p>Note: Slider 2 has 5 (5px) of offset option, you'll see the knob going outside the slider because of the offset. Look at js code</p>
<div id="area2">
	<div id="knob2"></div>
</div>
<p id="upd2">XX</p>
 
<h3>Slider 3</h3>
<div>Options: vertical mode</div> 
<div id="area3">
	<div id="knob3"></div>
</div>
<p id="upd3">XX</p>

#area {
	background: #ccc;
	height: 20px;
	width: 500px;
}
 
#knob {
	height: 20px;
	width: 20px;
	background: #000;
}
 
#area2 {
	position: relative;
	height: 15px;
	width: 280px;
	background: #000;
}
 
#knob2 {
	position: absolute;
	height: 15px;
	width: 20px;
	background: #ff3300;
	cursor: pointer;
}
 
#area3 {
	background: #ccc;
	height: 300px;
	width: 20px;
}
 
#knob3 {
	height: 20px;
	width: 20px;
	background: #000;
}