No description, website, or topics provided.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Accessible Slider

This class provides an accessible control to create sliders.

Widget based on Mootools More Slider!


How to use

Create a new slider by simply calling

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


  • 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 ='myElement'),
font ='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.