MooTools

How to use

Create a new slider by simply calling

var slider = new Slider(elementID, knobID, [options]); 

Parameters

• elementID - ID of a DOM element to contain the slider
• knobID - ID of a DOM element to contain the slider knob

Options (extract)

• steps - amount of steps the slider dimension is divided into
• initialStep - the start value where the knob is set at the beginning
• range - define a [from, to] range to specify the dimension of the slider
• onChange - function that triggers every time the value changes

See a complete example

var el = document.id('myElement'),
font = document.id('fontSize');

// Create the new slider instance
var slider = new Slider(el, el.getElement('.knob'), {
    steps: 25,  // There are 25 steps
    initialStep: 8,
    range: [8, 33], // Minimum value is 8
    onChange: function(value){
        // Everytime the value changes, we change the font of an element
        font.setStyle('font-size', value);
    }
});

font.setStyle('font-size', slider.options.initialStep);

In this example the value of the font-size of the element with the id "fontSize" is adjusted according to the slider position.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.