script.aculo.us Sliders setEnabled option

Last Updated : 20 Dec, 2020

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 setEnabled function is used to enable the given slider. A slider that is disabled has its disabled property set to true and cannot be interacted with by the user. Using this function sets the disabled property to false and allows the user to interact with the slider.

Syntax:

setEnabled()

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;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>Sliders setEnabled</h2> 
  
    <p> 
        A disabled slider can be enabled  
        by using the setEnabled() 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="enableSlider()"> 
        Enable 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), 
            disabled: true, 
  
            onSlide: (val) => { 
                document.querySelector("#out") 
                    .textContent = val; 
            } 
        }); 
  
        let slider2 = new Control.Slider('handle-hor2', 
            'track-hor2', { 
  
            // Define the range 
            range: $R(1, 100), 
            disabled: true, 
  
            onSlide: (val) => { 
                document.querySelector("#out2") 
                    .textContent = val; 
            }); 
  
        function enableSlider() { 
  
            // Set the value of the slider 
            // to the given value 
            slider2.setEnabled(); 
        } 
    </script> 
</body> 
  
</html> 