The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Slider controls are thin tracks that allow the user to input values. It is done by defining a range of values that can be selected by the user by dragging the handle to the appropriate value.
The onSlide option is used to specify a callback function that would be invoked whenever the slider is moved by dragging. The current value of the slider would be passed as a parameter to the function.
Syntax:
{ onChange: function }
Parameters: This option has a single value as mentioned above and described below:
- function: This is a callback function that would be invoked whenever the slider is being moved by dragging.
The below example illustrates the use of this option.
Example:
<!DOCTYPE html> < html >
< head >
<!-- Include the required scripts -->
< script type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript" src = "scriptaculous.js?load = slider" >
</ script >
<!-- Style the Sliders so that they
are properly visible -->
< style type = "text/css" >
.track {
width: 250px;
background-color: orange;
height: 5px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
top: -2px;
}
.pad {
padding: 25px 15px;
}
</ style >
</ head >
< body >
< p >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h2 >Sliders onSlide Option</ h2 >
< p >
The onSlide callback function
gets invoked whenever the slider
is dragged.
</ p >
< div class = "pad" >
< div id = "track-hor" class = "track" >
< div id = "handle-hor" class = "handle" >
</ div >
</ div >
</ div >
< p >Current Slider Value:
< span id = "out" >0</ span >
</ p >
< div class = "pad" >
< div id = "track-hor2" class = "track" >
< div id = "handle-hor2" class = "handle" >
</ div >
</ div >
</ div >
< p >Current Slider 2 Value:
< span id = "out2" >0</ span >
</ p >
< script type = "text/javascript" >
// Initialize the slider
let slider = new Control.Slider('handle-hor',
'track-hor', {
// Define the range
range: $R(1, 100),
// Define the callback function to be
// invoked when the slider is being
// dragged
onSlide: function (currValue) {
document.querySelector("#out")
.textContent = currValue;
}
});
// Initialize the slider
let slider2 = new Control.Slider('handle-hor2',
'track-hor2', {
// Define the range
range: $R(1, 100),
values: [1, 5, 10, 50, 80, 100],
// Define the callback function to be
// invoked when the slider is being
// dragged
onSlide: function (currValue) {
document.querySelector("#out2")
.textContent = currValue;
}
});
</ script >
</ body >
</ html >
|
Output: