Accessible Slider 1.3

This class provides an accessible control to create sliders.

Widget based on Mootools More Slider!



Details

Author
3i1a4o
Current version
1.3
GitHub
mashalla/slider
Downloads
10194
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/1.2.4: *
    • More/1.2.4: Class.Binds
    • More/1.2.4: Drag
    • More/1.2.4: Element.Dimensions
    • More/1.2.4: Element.Measure
    • Core/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.

blog comments powered by Disqus