滑动条 - range

移动结束显示

$('#range1').range({
    min:0,
    max:50,
    value:40,
    steps:5,
    onChange:function(status){
        $('#input1').val(status.value);
    }
});

移动过程中显示

$('#range2').range({
    min:10,
    max:62,
    value:40,
    steps:5,
    onSlide:function(status){
        $('#input2').val(status.value);
    }
});

调用方法:

$(selector).range-container(options,callback(api));

options参数

参数 默认值 说明
valueCls value 当前有效值范围显示class
handleCls handle 拖动滑块class
min 0 变化范围的最小值
max 100 变化范围的最大值
value 1 默认显示的值
steps 1 每次移动的步长
type 'outer' outer进度计算以进度条宽为准,inner进度计算需扣除条滑块宽
onSlide(obj) [无] 当前值变化时触发的事件,传入对象:event为事件,value为当前值
onChange(obj) [无] 当前值变化后触发的事件,传入对象:event为事件,value为当前值

callback(api)参数

方法 说明
setValue(value) 设置值
resize() 重置尺寸