script.aculo.us 滑块范围选项

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

Sliders range用于定义滑块的范围。滑块手柄只能在为两端定义的值内移动。必须使用 $R(min, max) 语法指定范围，其中min表示滑块的最小值， max表示最大值。

句法：

{ range: $R( min, max ) }

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

• min：这是一个数字，表示滑块范围的最小值。
• max：这是一个数字，表示滑块范围的最大值。

例子：

  
  
  
  
  
  
  
  
    .track {
      width: 200px;
      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 range
  
    The "range" option can be used to
    set the range of the slider.
  
  
  
    
      
      
    
  
  Current Slider1 Value: 
    
  
  
    
      
      
    
  
  Current Slider2 Value: 
    
  
  
    new Control.Slider('handle-hor',
      'track-hor', {
  
      // Setting the range of the slider
      // from 0 to 100
      range: $R(0, 100),
        
      sliderValue: 50,
  
      onSlide: (val) => {
        document.querySelector("#out1")
                .textContent = val;
      }
    });
  
    new Control.Slider('handle2-hor',
      'track2-hor', {
  
      // Setting the range of the slider
      // from 20 to 50
      range: $R(20, 50),
        
      sliderValue: 30,
  
      onSlide: (val) => {
        document.querySelector("#out2")
                .textContent = val;
      }
    });
  

输出：