Skip to content
Related Articles

Related Articles

script.aculo.us Sliders Values Option
  • Last Updated : 27 Nov, 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 values option is used to define a set of values that the slider would allow selecting. This can be used to limit the number of options and exactly specify the legal values available. The set of values is passed as an array of integers.

Syntax:

{ values: [ a, b, c... ] }

Values:

  • array: This is an array that specifies the values that the slider would allow for selection.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  <p>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h2>Sliders values</h2>
  <p>
    Move the slider to check the values
    that have been already set
  </p>
  
  <div class="pad">
    <div id="track-hor" class="track">
      <div id="handle-hor" class="handle">
      </div>
    </div>
  </div>
  <p>Current Slider Value: 
    <span id="out">0</span>
  </p>
  
  <script type="text/javascript">
  
    new Control.Slider('handle-hor',
                       'track-hor', {
      range: $R(1, 100),
        
      // Define the values that can 
      // be set by the slider
      values: [25, 50, 75, 90],
  
      onSlide: function (val) {
        document.querySelector("#out")
                .textContent = val;
      }
    });
  </script>
</body>
  
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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: 5px;
      background-color: gray;
      height: 150px;
      position: relative;
    }
  
    .track .handle {
      width: 20px;
      height: 10px;
      background-color: green;
      cursor: move;
      position: absolute;
      left: -8px;
    }
  
    .pad {
      padding: 25px;
    }
  </style>
</head>
<body>
  <p>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h2>Sliders values</h2>
  <p>Move the slider to check the values
    that have been already set</p>
  
  <div class="pad">
    <div id="track-vert" class="track">
      <div id="handle-vert" class="handle"></div>
    </div>
  </div>
  <p>Current Slider Value: 
    <span id="out">0</span>
  </p>
  
  <script type="text/javascript">
  
    new Control.Slider('handle-vert',
                       'track-vert', {
      range: $R(1, 100),
      axis: 'vertical',
  
      // Define the values that can be
      // set by the slider
      values: [1, 5, 10, 50, 100],
  
      onSlide: function (val) {
        document.querySelector("#out")
                .textContent = val;
      }
    });
  </script>
</body>
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :