script.aculo.us Sliders onSlide Option
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:
HTML
<!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;" > w3wiki </ 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:
Contact Us