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:

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>
  <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>

Output:

Example 2:

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: 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>

Output:

script.aculo.us Sliders onSlide Option

sayantanm19

Improve

Article Tags :

script.aculo.us Sliders Values Option

Similar Reads

Thank You!

What kind of Experience do you want to share?