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 value.
The Sliders setDisabled function is used to disable the given slider. A slider that is enabled has its disabled property set to false and can be interacted with by the user. Using this function sets the disabled property to true and prevents the user to interact with the slider.
Syntax:
setDisabled()
Parameters: This function has no parameters.
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: gray; height: 5px; position: relative; } .track .handle { width: 20px; height: 10px; background-color: green; cursor: move; position: absolute; top: -2px; } .pad { padding: 25px; } </ style > </ head > < body > < h1 style = "color: green;" > w3wiki </ h1 > < h2 >Sliders setDisabled</ h2 > < p > An enabled slider can be disabled by using the setDisabled() method as shown below. </ p > < div class = "pad" > < div id = "track-hor" class = "track" > < div id = "handle-hor" class = "handle" > </ div > </ div > </ div > < p >Current Slider 1 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 > < button onclick = "disableSlider()" > Disable Second Slider </ button > < 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), onSlide: (val) => { document.querySelector("#out") .textContent = val; } }); let slider2 = new Control.Slider('handle-hor2', 'track-hor2', { // Define the range range: $R(1, 100), onSlide: (val) => { document.querySelector("#out2") .textContent = val; } }); function disableSlider() { // Set the value of the slider // to the given value slider2.setDisabled(); } </ script > </ body > </ html > |
Output: