Open In App

script.aculo.us Sliders setDisabled Option

Improve
Improve
Like Article
Like
Save
Share
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 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;">
        GeeksforGeeks
    </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:



Last Updated : 20 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads