移动结束显示
var input1 = document.getElementById("input1");
new range("#range1",{
min: 0,
max: 50,
value:40,
steps:1,
onChange:function(status){
input1.value=status.value;
}
});
移动过程中显示
var input2=document.getElementById("input2");
new range("#range2",{
min: 10,
max: 62,
value:40,
onSlide:function(status){
input2.value=status.value;
}
});
移动过程中显示
var input3=document.getElementById("input3");
new range("#range3",{
onSlide:function(status){
input3.value=status.value;
}
},function(api){
api.setValue(20)
});
调用方法:
new range("selector",options,callback(api));
options参数
| 参数 | 默认值 | 说明 |
|---|---|---|
| valueCls | value | 当前有效值范围显示class |
| handleCls | handle | 拖动滑块class |
| min | 0 | 变化范围的最小值 |
| max | 100 | 变化范围的最大值 |
| value | 1 | 默认显示的值 |
| steps | 1 | 每次移动的步长 |
| type | 'outer' | outer进度计算以进度条宽为准,inner进度计算需扣除条滑块宽 |
| onSlide | function(){} | 当前值变化时触发的事件,传入对象:event为事件,value为当前值 |
| onChange | function(){} | 当前值变化后触发的事件,传入对象:event为事件,value为当前值 |
callback(api)参数
| 方法 | 说明 |
|---|---|
| setValue(value) | 设置值 |
| resize() | 重置尺寸 |