移动结束显示
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() | 重置尺寸 |