Mootools 1.2 Tutorial Scroll Bar (Slider)_Mootools

Although sliders follow this familiar pattern, there's still something special about them.
Basic usage
Create a new scroll bar (Slider) object
We start with HTML and CSS first. The basic idea is to create a div for the scrollbar, so a long rectangle (the length depends on what we do with the scrollbar), and a child element as the slider.
Reference code:

Copy code The code is as follows:

Our CSS can also be that simple. Just set the width, height, and background color.
Reference code:

Copy code The code is as follows:

#slider {
width: 200px
height: 20px
background-color: #0099FF
}
#knob {
width: 20px
height: 20px
background-color: #993333
}

Now, we can create our new scrollbar object. To initialize the scroll bar, first assign your relevant elements to some variables, and then use "new" to create a scroll bar Slider object, the same as when we created tween, morph and drag.move before:
Reference code :

Copy code The code is as follows:

// Assign the element to the variable
var sliderObject = $ ('slider');
var knobObject = $('knob');
// Create a new slider object
// First define the slider element
// Then define the slider element
var SliderObject = new Slider(sliderObject, knobObject, {
// Here are your options
// We will talk about these options in detail later
range: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// The onchange event will be triggered when the value of step changes
// It will pass the current step as a parameter
onChange: function(step){
// Place the code to be executed when onchange is placed here
// You can quote step
},
// The ontick event is triggered when the user drags the slider
// It will pass the current position (relative to the position of the parent element)
onTick: function(pos){
// This is required to adjust the position of the slider
// We will explain this in detail below
this.knob.setStyle('left', pos);
},
// Triggered when dragging stops
onComplete: function(step){
// Code to be executed when complete
// You can refer to step
}
});

Slider options
Snap: (default is false), can be a true or false value. This determines whether the slider moves at minimum cells
Offset: (default is 0), which is the position of the slider relative to the start. You can do an experiment on this.
Range: (default is false), this is a very useful option. You can set a number range and the onchange event will be triggered based on this number and your step number. For example: If the range you set is [0, 200], and the step value you set is 10, then the step value of each onchange will be 20. This range is also a negative number, such as [-10,0]. This number is very useful when making a reverse scroll bar (example below).
Wheel: (default is false), if this parameter is set to true, this scroll bar will recognize mouse wheel events. When using the mouse wheel, you may need to adjust the range parameter so that the behavior of mouse wheel events is not reversed (again, examples will follow).
Steps: (default is 100), the default value of 100 is very useful because it can be easily used as a percentage. Of course, you can set up as many steps as you want (and that's okay).
Mode: (default is "horizontal"), this parameter defines whether the scroll bar scrolls horizontally or vertically. Of course, converting from horizontal to vertical scrolling requires some additional steps.
Callback event
onChange: This event is triggered when the step changes. Also pass the parameter "step". You can see when it is triggered in the example below.
onTick: This event is triggered when the position of the control point changes. Also pass the parameter "position". You can see when it is triggered in the example below.
onComplete: This event is triggered when the control point is released. Stab passing parameter "step". You can see when it is triggered in the example below.
Code Example
Let’s build an example to see them in action.
.set(); method: Take a look at the events on the button to see how to use the .set() method. It's very simple to use: call the slider object, append .set, and then the number of steps you want to scroll.
Reference code:

Copy code The code is as follows:

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 event
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 required (use left for horizontal scrolling)
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 required (use top for vertical scrolling)
this.knob.setStyle('top', pos);
} ,
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
});
// Set vertical The scrolling starts from 0
// Otherwise it starts from the top
SliderObjectV.set(0);
// Sets the scroll bar to start from 7
$('set_knob').addEvent(' click', function(){ SliderObject.set(7)});
});

onChange
passes the step you are on: onTick
passes the knob position: onComplete
passes the current step:
Note that in the vertical scrolling example, we don’t just put “mode " was changed to "vertical", and we also changed the "left" attribute in the .setStyle(); method in the onTick event to the "top" attribute. Also, look at how we set the "range" to start at -10 and go to 0. Then, we display the current number in the onChange event. We multiply this value by -1, which is exactly the opposite of the position. This accomplishes two things: One, it lets us change this value from 10 to 0, with 0 being at the very bottom. But this might set the rang from 10 to 0, causing the mouse wheel events to become reversed. That's our second reason - the mouse wheel reads the value, not the direction you're controlling it, so the only way to get the mouse wheel to read the scrollbar correctly and start the value from the bottom 0 is to do this Little by little changes.
Note: As for the use of "top" and "left" in the onTick event, I'm not sure if this is a "rule" in MooTools. This is just one way I've gotten them to work correctly, I'd be interested to hear some other clarity.

Learn more

As before, please refer to the sliders section in the documentation.

Download a zip package with everything you need to get started

Includes the core library and extension library of MooTools 1.2, as well as an external JavaScript file, a simple HTML page and a CSS file and the above example.