Mootools 1.2 Sliders
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.
By now, initiating these Mootools plugin objects should start seeming pretty familiar. Slider is no different, you create your new slider, define the elements for the slider and the handle, you set your options and then create some functions for the callback events. And though sliders do follow this familiar pattern, there are a few quirks along the way.
The Basics
Creating a new slider object
Lets first start with our html and css. The basic idea is to create a div for the slider, so a long rectangle (how long depends on what we are using the slider for) and a child element to act as the knob:
<div id="slider"><div id="knob"></div></div>
Our css can be simple also. Just set up the width, height and background colors:
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}Now, we can create our new slider object. To initiate the slider, first throw your elements into vars, then create a “new” slider object just like we did with tween, morph and drag.move:
//put your elements into variables var sliderObject = $('slider'); var knobObject = $('knob'); //create a new slider object //define the slider element first //then define the knob var SliderObject = new Slider(sliderObject , knobObject , { //here are your options //we will look at each one below range: [0, 10], snap: true, steps: 10, offset: 0, wheel: true, mode: 'horizontal', //onchange fires when the value of step changes //it will pass the current step as a parameter onChange: function(step){ //put what you want to happen on change here //you can refer to the step }, //ontick moves when the user drags the knob //it will pass the current position (relative to the parent element) onTick: function(pos){ //this is necessary for the knob to adjust //we will talk about this more below this.knob.setStyle('left', pos); }, //fires when the dragging stops onComplete: function(step){ //put what you want to happen on complete here //you can refer to the step } });
Slider Options
Snap: (defaults to false) can be a true or false value. This determines whether the knob snaps to the steps as its dragged along the slider.
Offset: (defaults to 0) This is the relative offset of the knob from the starting position. Try experimenting with this one.
Range: (defaults to false) 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 scroller (more on that below).
Wheel: (defaults to 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).
Steps: (defaults to 100) The default of 100 steps is very useful as it’s easy to use as a percentage. You can, however, set as many steps (that are usable) within reason.
Mode: (defaults to ‘horizontal’) Mode will define whether a slider registers as vertical or horizontal. However, there are a few more necessary steps to convert from horizontal and vertical.
Callback Events
onChange: this event fires whenever the current step changes. Passes “step.” Check out the demo below to see when it fires.
onTick: this event fires whenever the handle position is changed. Passes “position.” Check out the demo below to see what it fires.
onComplete: this event fires whenever the handle is let go of. Passes “step.” Check out the demo below to see when it fires.
Example
Let’s set up a demo that shows up a bit of feedback.
.set(); Take a look at the button event to see .set() in action. It is simple to use: just call the slider object, add .set, then the step you want to go to.
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', onTick: function(pos){ //this line is very necessary (top with vertical) this.knob.setStyle('top', pos); }, 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)}); });
passes the step you are on:
passes the knob position:
passes the current step:
Notice on the vertical example that we not only change “mode” to “vertical,” we also change .setStyle() to “top” instead of “left” within the onTick event. Also, see how in “range” we start at -10 then go to 0. Then, when we display the number inside onChange, we multiply the negative value by -1, resulting in the positive counterpart. This accomplishes two things: first, it lets us change the value from 10 to 0, with 0 at the bottom. While this could be accomplished by setting the range to 10, 0 the mousewheel becomes inverted.. Which brings us to the second reason – the mousewheel reads the values, not the direction you want the handle to go, so the only way to have the mousewheel read the slider correctly AND have the values start at 0 on the bottom was to pull this little trick
Note: regarding the use of “top” and “left” within the onTick event, I can’t say for sure whether or not this is “regulation” mootools. This is just how I was able to get it to work, and I would interested to hear if there are other, possibly cleaner ways.
To Learn More…
As always, check out the docs section on sliders
Tomorrow’s Tutorial
Sortables Plugin and Intro to Methods
Download a zip with everything you need
Including the Mootools 1.2 core and more libraries, as well as an html file, external javascript file, a css stlye sheet and the example above.
Questions, Comments or Suggestions
All welcome, thanks for checking out our tutorials. Here we are, halfway through the series. We are going to start doing more user requests, and the series is filling in fast. If there are any subjects you would like to see featured here, please drop us a note. Hope you find this series useful.
Tags: 30 days of mootools, javascript, Mootools 1.2, mootools plugins, sliders, tutorials
Thanks Troy for all of these great tutorials. You have put a lot of effort and I’m sure there is plenty of people who appreciate that and learn a lot from them. Looking forward of seeing rest of them.
You might consider adding print stylesheet on this blog. So tutorials etc. would print out nicely.
ATB
Thanks Keijo, that’s a good idea, i’ll be sure to make one up when I have a moment.
what about using a slider to scroll content?
Aside from the default scroll bars, there is also Fx.Slide which gives you the ability to control your content and page scrolling. We’ll be sure to do a tutorial on that plugin down the road. In the meantime, you can check out the docs: http://docs.mootools.net/Plugins/Fx.Scroll
Thanks benjamin.
Thanks for the tutorials, I have to say your tutorials are 1million times better than mootools’ tutorial….thank you
or else I would have been very lost!
Great tutorial.
Would you have an idea how to get this going with decimal numbers?
For instance: 100.3 and then in/decrease with the tenth to 100.4 etc and of course at 100.9 it will go to 101.0
thanx in advance
Peter
Peter, all you need to do is set the steps to the actual number of steps you want, then convert the number anyway you like for the display. For example, you could have 100 steps set in the system, and show 1.11, 1.12, 1.12, etc… by converting the actual step number on the onComplete event. Hope that helps.
Troy, how can we stop a knob at a particular point on the slider so that a user can no longer drag the knob further in a given direction?
Andrew, I would just shorten the slider and the steps. If you wanted to make it look like there was more, you could use another div to extend the slider, but it would just be for visual effect. Hope this answers your question.
how can you get snapping to work when you click on the slider bar? try it on the vertical slider
@10 – interesting, i never noticed that before. I’ll look into it and see if i can learn anything. Thanks for pointing it out.
i kinda got it working using specific widths. a 20px knob width, 320px slider width, and 12 steps. my onTick looks like so:
onTick: function(pos){
$(‘tick’).highlight(‘#F3F825′);
$(‘knob_pos’).set(‘html’, pos);
this.knob.setStyle(‘left’, this.step*25);
}
works for the most part but if i click on the left part of my knob it jumps to the previous step. clicking on the knob should have no action.
hope this helps!
i suppose this is better:
sorry for the extra post
this.knob.setStyle(‘left’, this.step*this.stepWidth);
@13 – Thanks for posting the fix you found wanlee. I’ll be sure and update the tutorial as soon as i get a chance
Hi Troy,
i have a question about this plug-in: can i use it with a .swf to stop and play the movie and go back and forward in it?
Thank you
@15 – Mootools has a class that lets you interface with actionscript. Please let us know how this goes for you, I haven’t played with it much yet. http://mootools.net/docs/Utilities/Swiff
[...] Sliders [...]
[...] Sliders [...]
[...] Sliders [...]
[...] Sliders [...]
[...] Sliders [...]
[...] Sliders [...]
[...] Sliders [...]
hello , I want know how to get a slider’s current steps ?
not on event , I thought there may be a attribute that can let me get current steps where the knob stopped
One option is always to get take a look at the css value then do the math.
[...] ???? [...]
[...] Options and Fx EventsDrag and Drop using Drag.MoveRegular ExpressionsPeriodical and Intro to HashesSlidersSortables and Intro to MethodsAccordionClasses part ITooltipsA Few Mootools TabsClasses part [...]
[...] Sliders [...]
Hello,
has any one figured out how to change Slider parameter after creation?
I want to change steps, range, snap, after the slider was created.
Any sugesstions?