Slider

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

我们使用< input >标签来创建滑动条，设置它的class属性为easyui-slider。

<input class="easyui-slider" value="12"  style="width:300px"   
        data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

也允许使用< div >创建滑动条，但是'value'属性是无效的。

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

还可以使用javascript来创建。

<div id="ss" style="height:200px"></div>

$('#ss').slider({    
    mode: 'v',    
    tipFormatter: function(value){    
        return value + '%';    
    }    
});

我们可以通过"setValue"方法来设置slider的值，通过“getValue”获取slider的值。

$('#ss').slider('setValue',25); 
$('#ss').slider('getValue','');

还有一个常用的onchange事件，在值发生变化时触发。

$('#ss').slider({    
    mode: 'v',     // 设置水平h 还是垂直v
    tipFormatter: function(value){    //格式化滑动条
        return value + '%';    
    },
    onChange: function(value){
        alert(value);
    }
});

另外还可以通过max与min属性设置滑动条的最大与最小值。

jQuery EasyUI 互动版

Slider