MooTools - Sliders
Slider is a functionality that reflects an action while sliding the knob or any button. You can create your own slider while defining elements, the handler, options, and call back events. Let us discuss more about slider.
Creating a New Slider
We first have to choose the suitable HTML elements for slider. While considering the basic idea, div elements are the most suitable for sliders because using divs, we can create child elements. We now have to set the CSS for those divs to make the div structure as a perfect slider. Here, the parent div is for slider and the child div is for knob.
We now have to use these divs as sliders by passing the elements to the Slider constructor as sliderObject, and knobObject. Take a look at the following syntax for defining slider.
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);
We also have to define the slider options.
Let us discuss a few options that are used for sliders.
A snap value can be a true or false value. This determines whether the knob snaps to the steps as it is dragged along the slider. By default, it is false.
This is the relative offset of the knob from the starting position. Try experimenting with this one. By default, it is 0.
This is a very useful option. You can set a range of numbers that the steps will break into. For example, if your range was [0, 200] and you had 10 steps, your steps would be 20 apart. The range can also include negative numbers, for example [-10, 0], which is very useful when inverting the scrolled. By default, it is false.
Set wheel to true and the scroller will recognize the mousewheel event. When using the mousewheel, you may have to adjust the range to ensure that the mousewheel event does not appear inverted (again, more on that later).
The default of 100 steps is very useful as it’s easy to use as percentage. You can, however, set as many steps (that are usable) within reason. By default, it is 100.
Mode will define whether a slider registers itself as vertical or horizontal. However, there are a few more necessary steps to convert from horizontal and vertical. By default, it is horizontal.
There are three important callback events that a Slider provides.
Any change in the present step triggers the execution of the event. Check out the example given below to see when it executes.
Any change in the position of the handle triggers the execution of this event. Check out the example given below to see what this executes.
This event executes whenever the handle is let go of. Check out the example given below to see when it executes.
The following example explains the horizontal and vertical slider along with the event indicators. Take a look at the following code.
Click on the brown knob on the horizontal or vertical sliders then drag it, you will find the step position and event indication for each action.