30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
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.
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
}
});
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.
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.
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)});
});
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.
As always, check out the docs section on sliders
Sortables Plugin and Intro to Methods