script.aculo.us 滑块

滑块是一种小轨道，您可以沿着它滑动手柄。它转化为一个数值。使用 script.aculo.us 的滑块模块，您可以创建具有大量控制的滑块。

句法：

new Control.Slider( handle, track, {options} );

滑块选项：

Options	Description
Axis	Can be used to set the axis of the slider i.e. horizontal or vertical. Defaults to horizontal.
Range	Can be used to set the range of the slider.
sliderValue	Can be used to set the initial position of the slider. The default location is the initial value of the range.
Values	Can be used to set the discrete values the slider can take in its range.
Disabled	Can be used to create a slide that is initially disabled.
setValue	Can be used to set the value and position of the slider.
setDisabled	Can be used to disable a slider.
setEnabled	Can be used to enable a slider.

回调选项：

Options	Description
onSlide	Triggered whenever the slider is dragged. The function gets the slider value as its parameter.
onChange	Triggered whenever the slider value is changed. The function gets the slider value as its parameter.

例子：

HTML

 

    
    
     
    
    
     
    
        window.onload = function () {
            new Control.Slider('handle', 'track', {
                range: $R(1, 100),
                values: [1, 10, 20, 30, 40,
                    50, 60, 70, 80, 90, 100],
                sliderValue: 1,
                onSlide: function (value) {
                    $('sliderValue').innerHTML
                        = 'Slider Position: ' + value;
                }
            });
        }
    
 
    
        .track {
            background-color: rgb(0, 0, 0);
            position: relative;
            height: 10px;
            width: 200px;
            cursor: pointer;
        }
 
        .handle {
            background-color: #13e421;
            height: 20px;
            width: 4.25px;
            top: -4.25px;
            cursor: move;
        }
    

 

    
        
        
    
 
    
 
  

 

输出：