script.aculo.us Sliders onChange 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 onChange option is used to specify a callback function that would be invoked whenever the value of the slider changes, either when the slider has finished moving or using the setValue() method to set a new value. 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 has finished moving or has been changed using the setValue() method.
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;"> GeeksforGeeks </h1> <h2>Sliders onChange Option</h2> <p> The onChange callback function gets invoked whenever the value changes. The value of the slider can be set using the setValue method. </p> <div class="pad"> <div id="track-hor" class="track"> <div id="handle-hor" class="handle"> </div> </div> </div> <input type="text" id="val"> <button onclick="setVal()"> Set Value </button> <p>Current Slider Value: <span id="out">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), onChange: function (currValue) { document.querySelector("#out") .textContent = currValue; } }); function setVal() { // Get the value form the input box let val = document.querySelector("#val") .value; // Set the value of the slider // to the given value slider.setValue(val); } </script></body></html> |
Output:
Please Login to comment...