项目地址 返回首页

移动结束显示

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() 重置尺寸