script.aculo.us 滑块 setValue 选项

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

Sliders setValue函数用于将滑块的值更新为给定值。它将滑块的手柄移动到滑块轨道的适当位置。每当使用此方法时都会调用 onChange() 回调函数，并可用于跟踪值的变化。

句法：

setValue( value, handleIndex )

参数：此函数有两个参数，如前所述，如下所述：

• value：这是一个数字，将用于更新滑块的值。
• handleIndex：用于定义使用多个滑块时要更新的滑块的索引。它是一个可选参数。如果未传递此值，则更新上次使用的滑块。

例子：

  
  
  
  
  
  
  
  
    .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 setValue
  
    The value of the slider can be set
    by using the setValue() method 
    as shown below.
  
  
  
  
    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 (v) {
        document.querySelector("#out")
                .textContent = v;
      }
    });
  
    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);
    }
  

输出：