A demo page for this blog post.
No-options slider. Does nothing, but slide, of course. Slide the red handle by dragging, or tap (and hold) outside it, on its rail.
new Slider('slider1');
The purpose of the slider is to actually control something with it – hence the callback. It receives a value parameter, which goes from 0 to 1. 0 being the left-hand side and 1 being right-hand side.
new Slider('slider2', { callback: function(value)
{
alert(value);
}});
You may want your slider to have a limited amount of steps. Here is an example with just two, left and right, and nothing in between.
new Slider('slider3', { steps: 2 });
When using steps, you can enable snapping to "force" the slider to jump directly into the step spots; both when dragging and tapping.
new Slider('slider4', { steps: 5, snapping: true });
Now this is a pretty neat feature. You can set another type of callback, a live callback, if you may. What this means is that you can control something with the slider, while you're dragging or tapping on it, before you even release. Let your imagination soar!
In this example you're controlling the body's opacity. You can also notice it's possible to preset the value of the slider; It's set it to 1 (max).
new Slider('slider5', { value: 1, animation_callback: function(value)
{
flower.style.opacity = value;
flower.style.filter = 'alpha(opacity=' + String(value * 100) + ')';
}});
For more custom solutions, you have the possibility to programmatically interact with the slider. You can enable/disable it, and to change its value.
Control slider: enable / disable / set (random) value.
var mySlider = new Slider('slider6');
document.getElementById('enable-slider').onclick = function()
{
mySlider.enable();
return false;
}
document.getElementById('disable-slider').onclick = function()
{
mySlider.disable();
return false;
}
document.getElementById('value-slider').onclick = function()
{
mySlider.setValue(Math.random());
return false;
}
© 2010 ovidiu.ch.