script.aculo.us 滑块 onChange 选项

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

onChange选项用于指定一个回调函数，当滑块的值发生变化时，无论滑块完成移动还是使用 setValue() 方法设置新值，都会调用该回调函数。滑块的当前值将作为参数传递给函数。

句法：

{ onChange: function }

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

• 函数：这是一个回调函数，只要滑块完成移动或使用 setValue() 方法更改，就会调用该回调函数。

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

例子：

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 onChange Option
    

    The onChange callback function 
    gets invoked whenever the value
    changes. The value of the slider 
    can be set using the setValue method.
  
  
  
  
    
      
      
    
  
  
  
  
    Set Value
  
  
    
Current Slider Value: 
    0
  
  
  
  
  
    // Initialize the slider
    let slider = new Control.Slider('handle-hor',
      'track-hor', {
        
      // Define the range
      range: $R(1, 100),
  
      onChange: function (currValue) {
        document.querySelector("#out")
                  .textContent = currValue;
      }
    });
  
    function setVal() {
  
      // Get the value form the input box
      let val =
          document.querySelector("#val")
                    .value;
  
      // Set the value of the slider
      // to the given value
      slider.setValue(val);
    }
  

输出：