script.aculo.us Slider

Last Updated : 19 Apr, 2022

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 used to set the axis of the slider i.e. horizontal or vertical. Defaults to horizontal.
Range	Can be used to set the range of the slider.
sliderValue	Can be used to set the initial position of the slider. The default location is the initial value of the range.
Values	Can be used to set the discrete values the slider can take in its range.
Disabled	Can be used to create a slide that is initially disabled.
setValue	Can be used to set the value and position of the slider.
setDisabled	Can be used to disable a slider.
setEnabled	Can be used to enable a slider.

CallBack Options:

Options	Description
onSlide	Triggered whenever the slider is dragged. The function gets the slider value as its parameter.
onChange	Triggered whenever the slider value is changed. The function gets the slider value as its parameter.

Example:

HTML

<!DOCTYPE html> 
<html> 
 
<head> 
    <script type="text/javascript"
        src="prototype.js"> 
    </script> 
     
    <script type="text/javascript"
        src="scriptaculous.js?load = slider"> 
    </script> 
     
    <script> 
        window.onload = function () { 
            new Control.Slider('handle', 'track', { 
                range: $R(1, 100), 
                values: [1, 10, 20, 30, 40, 
                    50, 60, 70, 80, 90, 100], 
                sliderValue: 1, 
                onSlide: function (value) { 
                    $('sliderValue').innerHTML 
                        = 'Slider Position: ' + value; 
                } 
            }); 
        } 
    </script> 
 
    <style> 
        .track { 
            background-color: rgb(0, 0, 0); 
            position: relative; 
            height: 10px; 
            width: 200px; 
            cursor: pointer; 
        } 
 
        .handle { 
            background-color: #13e421; 
            height: 20px; 
            width: 4.25px; 
            top: -4.25px; 
            cursor: move; 
        } 
    </style> 
</head> 
 
<body> 
    <div id="track" class="track "> 
        <div id="handle" class="handle"
            style="width: 10px;"> 
        </div> 
    </div> 
 
    <p id="sliderValue"></p>
 
  
</body> 
 
</html>