Slider

Here is the documentation for Slider.js.

Sliders are pretty common interfaces these days and MooTools has the hookup to make these things easily. At its heart, a slider is just a draggable element limited to a plane (horizontal or vertical) that provides data based on the distance it's been moved.

Here's a simple slider (you need to execute the code block below for this to actually be interactive):

var mySlide = new Slider($('area'), $('knob'), {
	onChange: function(pos){
	$('upd').set('html', pos);
	}
}).set(0);

var mySlide = new Slider($('area'), $('knob'), {
	onChange: function(pos){
	$('upd').set('html', pos);
	}
}).set(0);

The Slider class takes the following options when you instantiate it: Arguments:

element: the knob container
knob: the handle
options: see Options below

Options:

onChange: a function to fire when the value changes.
onComplete: a function to fire when you're done dragging.
onTick: optionally, you can alter the onTick behavior, for example displaying an effect of the knob moving to the desired position. onTick executes the funciton you specify and passes as parameter the new position.
steps: the number of steps for your slider.
mode: either 'horizontal' or 'vertical'. defaults to horizontal.

Slider Example 2

A nicer looking, 10-step slider:

var mySlide2 = new Slider($('area2'), $('knob2'), {
	onChange: function(pos){
		$('upd2').set('html', pos);
	},
	steps: 10
}).set(4);

var mySlide2 = new Slider($('area2'), $('knob2'), {
	onChange: function(pos){
		$('upd2').set('html', pos);
	},
	steps: 10
}).set(4);