script.aculo.us Sliders onSlide Option Last Updated : 30 Dec, 2020 Comments Improve Suggest changes Like Article Like Report 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;"> 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: Comment More infoAdvertise with us Next Article script.aculo.us Sliders onSlide Option sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies script.aculo.us Similar Reads 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 2 min read script.aculo.us Sliders Disabled Option The script.aculo.us library is a cross-browser library that aims to 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 2 min read script.aculo.us Sliders Axis Option The script.aculo.us library is a cross-browser library that aims to 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 3 min read script.aculo.us Sliders range 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 2 min read script.aculo.us Sliders Values 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 3 min read script.aculo.us Sliders setValue 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 2 min read script.aculo.us Sliders setEnabled 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 2 min read script.aculo.us Sliders setDisabled 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 2 min read script.aculo.us Sliders sliderValue Option The script.aculo.us library is a cross-browser library that aims to 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 2 min read script.aculo.us Slider 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 Axis Can be us 2 min read Like