TinyRange is a small jquery slider plugin that augments the html5 range element
Tiny Range is a small jquery slider plugin that augments the html5 range element to make it styleable and adds additional options such as multiple handles.
Why bother when jQuery UI exists? jQuery UI is awesome, but the dependencies for the slider alone is ~22Kb. Tiny range is much smaller and nimbler at only 2Kb.
Just call the range() function on any range input in jquery to the element with a tiny range instance. Attributes on the input such as 'min', 'max' and 'step' will be used by the plugin.
Example
$('input[type=range]').range();
The plugin currently accepts three options
Example 1
$('input[type=range]').range({
range: true
});
Example 2
$('input[type=range]').range({
change: function(values){
// do something with new value(s)
alert(values);
},
blur: function(values){
// do something with new value(s)
alert(values);
}
});
In the event that you need to remove the plugin you can do so cleanly by passing 'destroy' as the first argument to the plugin
Example
$('input[type=range]').range('destroy');