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):

XX

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

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:

XX

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