script.aculo.us 滑块 onSlide 选项

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

onSlide选项用于指定一个回调函数，只要拖动滑块移动，就会调用该回调函数。滑块的当前值将作为参数传递给函数。

句法：

{ onChange: function }

参数：此选项具有如上所述和如下所述的单个值：

• 函数：这是一个回调函数，只要通过拖动来移动滑块，就会调用该回调函数。

下面的示例说明了此选项的使用。

例子：

HTML

  
  
  
  
  
  
  
  
    .track {
      width: 250px;
      background-color: orange;
      height: 5px;
      position: relative;
    }
  
    .track .handle {
      width: 20px;
      height: 10px;
      background-color: green;
      cursor: move;
      position: absolute;
      top: -2px;
    }
  
    .pad {
      padding: 25px 15px;
    }
  


    

  
    GeeksforGeeks
  
  Sliders onSlide Option
    

    The onSlide callback function 
    gets invoked whenever the slider
    is dragged.
  
  
  
    
      
      
    
  
  
    
Current Slider Value: 
    0
  
  
  
  
    
      
      
    
  
  
    
Current Slider 2 Value: 
    0
  
  
  
  
  
    // Initialize the slider
    let slider = new Control.Slider('handle-hor',
      'track-hor', {
        
      // Define the range
      range: $R(1, 100),
  
      // Define the callback function to be
      // invoked when the slider is being
      // dragged
      onSlide: function (currValue) {
        document.querySelector("#out")
                  .textContent = currValue;
      }
    });
  
    // Initialize the slider
    let slider2 = new Control.Slider('handle-hor2',
      'track-hor2', {
        
      // Define the range
      range: $R(1, 100),
      values: [1, 5, 10, 50, 80, 100],
  
      // Define the callback function to be
      // invoked when the slider is being
      // dragged
      onSlide: function (currValue) {
        document.querySelector("#out2")
                  .textContent = currValue;
      }
    });
  

输出：