A slider is a kind of small track, along which you can slide a handle. It translates into a numerical value. With script.aculo.us’s slider module, you can create sliders with plenty of control.
Syntax:
new Control.Slider( handle, track, {options} );
Slider Options:
Options |
Description |
Can be used to set the axis of the slider i.e. horizontal or vertical. Defaults to horizontal. | |
Can be used to set the range of the slider. | |
Can be used to set the initial position of the slider. The default location is the initial value of the range. | |
Can be used to set the discrete values the slider can take in its range. | |
Can be used to create a slide that is initially disabled. | |
Can be used to set the value and position of the slider. | |
Can be used to disable a slider. | |
Can be used to enable a slider. |
CallBack Options:
Options |
Description |
Triggered whenever the slider is dragged. The function gets the slider value as its parameter. | |
Triggered whenever the slider value is changed. The function gets the slider value as its parameter. |
Example:
HTML
<!DOCTYPE html> < html >
< head >
< script type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript"
src = "scriptaculous.js?load = slider" >
</ script >
< script >
window.onload = function () {
new Control.Slider('handle', 'track', {
range: $R(1, 100),
values: [1, 10, 20, 30, 40,
50, 60, 70, 80, 90, 100],
sliderValue: 1,
onSlide: function (value) {
$('sliderValue').innerHTML
= 'Slider Position: ' + value;
}
});
}
</ script >
< style >
.track {
background-color: rgb(0, 0, 0);
position: relative;
height: 10px;
width: 200px;
cursor: pointer;
}
.handle {
background-color: #13e421;
height: 20px;
width: 4.25px;
top: -4.25px;
cursor: move;
}
</ style >
</ head >
< body >
< div id = "track" class = "track " >
< div id = "handle" class = "handle"
style = "width: 10px;" >
</ div >
</ div >
< p id = "sliderValue" ></ p >
</ body >
</ html >
|
Output: