script.aculo.us 滑块轴选项

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

Sliders Axis选项用于定义滑块应该移动的轴或方向。此选项接受一个字符串值，可以根据所需的方向设置为“水平”或“垂直”。

句法：

{ axis : horizontal | vertical }

值：此选项有两个值，如上所述和如下所述：

• 水平：这会将滑块的方向定义为水平。它是默认值。
• 垂直：这会将滑块的方向定义为垂直。

示例 1：

HTML

  

    
    
    
  
    
    
  
    
    
        .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 axis
  
    
        The slider is on the 
        horizontal axis.
    
  
    
        
            
            
        
    
  
    Current Slider Value:
        0
    
  
    
        new Control.Slider('handle-hor',
            'track-hor', {
            range: $R(1, 100),
  
            // Set the axis of the slider
            // to be horizontal 
            axis: 'horizontal',
  
            onSlide: (val) => {
                document.querySelector("#out")
                    .textContent = val;
            }
        });
    

  

输出：

示例 2：

HTML

  

    
    
    
  
    
    
  
    
    
        .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 axis
  
    The slider is on the vertical axis.
  
    
        
            
            
        
    
  
    Current Slider Value:
        0
    
  
  
    
  
        new Control.Slider('handle-vert',
            'track-vert', {
            range: $R(1, 100),
  
            // Set the axis of the slider
            // to be vertical 
            axis: 'vertical',
  
            onSlide: (val) => {
                document.querySelector("#out")
                    .textContent = val;
            }
        });
    

  

输出：