No description, website, or topics provided.
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Source
demo
README.md
package.yml

README.md

Accessible Slider

This class provides an accessible control to create sliders.

Widget based on Mootools More Slider!

Screenshot

How to use

Create a new slider by simply calling

#HTML
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

#HTML
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.