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:

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

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