Skip to content
Related Articles

Related Articles

script.aculo.us Sliders setEnabled option
  • Last Updated : 20 Dec, 2020
GeeksforGeeks - Summer Carnival Banner

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>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :