script.aculo.us 滑块值选项

script.aculo.us 库是一个跨浏览器库，旨在改进网站的用户界面。 Slider 控件是允许用户输入值的细轨道。它是通过定义一个值范围来完成的，用户可以通过将手柄拖动到适当的值来选择这些值。

滑块值选项用于定义滑块允许选择的一组值。这可用于限制选项的数量并准确指定可用的合法值。这组值作为整数数组传递。

句法：

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

价值观：

• 数组：这是一个数组，指定滑块允许选择的值。

示例 1：

  

  
  
  
  
  
  
  
  
    .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;
    }
  

  

  
  
    GeeksforGeeks
  
  Sliders values
  
    Move the slider to check the values
    that have been already set
  
  
  
    
      
      
    
  
  Current Slider Value: 
    0
  
  
  
  
    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;
      }
    });
  

  

输出：

示例 2：

  
  
  
  
  
  
  
  
    .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;
    }
  


  
  
    GeeksforGeeks
  
  Sliders values
  Move the slider to check the values
    that have been already set
  
  
    
      
    
  
  Current Slider Value: 
    0
  
  
  
  
    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;
      }
    });
  

输出：