Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

script.aculo.us Create Sliders

  • Last Updated : 21 Dec, 2020

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :