Aug
10
MooTools – Sliders ”; Previous Next 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. Syntax var SliderObject = new Slider(sliderObject , knobObject , [,options,],..); We also have to define the slider options. Slider Options Let us discuss a few options that are used for sliders. Snap 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. Offset This is the relative offset of the knob from the starting position. Try experimenting with this one. By default, it is 0. Range 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. Wheel 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). Steps 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 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. Callback Events There are three important callback events that a Slider provides. onChange Any change in the present step triggers the execution of the event. Check out the example given below to see when it executes. onTick 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. onComplete This event executes whenever the handle is let go of. Check out the example given below to see when it executes. Example The following example explains the horizontal and vertical slider along with the event indicators. Take a look at the following code. <!DOCTYPE html> <html> <head> <style “text/css”> #slider { width: 200px; height: 20px; background-color: #0099FF; } #knob { width: 20px; height: 20px; background-color: #993333; } #sliderv { width: 20px; height: 200px; background-color: #0099FF; } #knobv { width: 20px; height: 20px; background-color: #993333; } #change{ background-color: burlywood; border: 2px solid black; width: 200px; } #complete{ background-color: burlywood; border: 2px solid black; width: 200px; } </style> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> window.addEvent(”domready”, function() { var SliderObject = new Slider(”slider”, ”knob”, { //options range: [0, 10], snap: false, steps: 10, offset: 0, wheel: true, mode: ”horizontal”, //callback events onChange: function(step){ $(”change”).highlight(”#F3F825”); $(”steps_number”).set(”html”, step); }, onTick: function(pos){ $(”tick”).highlight(”#F3F825”); $(”knob_pos”).set(”html”, pos); //this line is very necessary (left with horizontal) this.knob.setStyle(”left”, pos); }, onComplete: function(step){ $(”complete”).highlight(”#F3F825”) $(”steps_complete_number”).set(”html”, step); this.set(step); } }); var SliderObjectV = new Slider(”sliderv”, ”knobv”, { range: [-10, 0], snap: true, steps: 10, offset: 0, wheel: true, mode: ”vertical”, onChange: function(step){ $(”stepsV_number”).set(”html”, step*-1); } }); //sets the vertical one to start at 0 //without this it would start at the top SliderObjectV.set(0); //sets the slider to step 7 $(”set_knob”).addEvent(”click”, function(){ SliderObject.set(7)}); }); </script> </head> <body> <div id = “slider”> <div id = “knob”></div> </div><br/><br/> <div id = “sliderv”> <div id = “knobv”></div> </div><br/> <span id = “stepsV_number”></span> <br/> <div id = “change” class = “indicator”> <strong>onChange</strong><br/> Passes the step you are on: <span id = “steps_number”></span> </div></br/> <div id = “complete” class = “indicator”> <strong>onComplete</strong><br /> passes the current step: <span id = “steps_complete_number”></span> </div> </body> </html> Output 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. Print Page Previous Next Advertisements ”;