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

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

element

the knob container

knob

the handle

options

see Options below

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.

A nicer looking, 10-step slider:

XX

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