3.2.7 sliderBar

说明: 方便用户选择范围内的某个值.

使用及参数说明:

<div id="sliderBar" class="xui_slider_bar"></div>

1.ES5时代
let slider = new xui.sliderBar({
    id: string,
    currentVal: number,
    initVal: number,
    max: number,
    unit: string,
    precision: number,
    disabled: bool,
    dragMove(val){
        console.log(val)
    },
    dragEnd(val){
        console.log(val);
    }
});

2.ES6时代
import sliderBar from '../packages/sliderBar';
let slider = new sliderBar({
    id: string,
    currentVal: number,
    initVal: number,
    max: number,
    unit: string,
    precision: number,
    disabled: bool,
    dragMove(val){
        console.log(val)
    },
    dragEnd(val){
        console.log(val);
    }
});

slider.getCurrentvalue();
slider.setCurrentValue(cur, total);

• 复制好html,取一个id,然后在你需要用户去加减等操作的地方初始化吧
• id表示数字框的id 必传
• max表示最大值,默认值为100
• currentVal表示默认显示的数字或进度,范围为0-1,默认值为.5
• initVal表示默认展示的数字
• unit表示显示的数字单位,默认值为空
• precision表示数字精度,默认值为0
• disabled表示是否禁止掉滑动输入框，禁止的style是xui_slider_disabled
• dragMove表示滑块滑动的回调,返回当前选择的数值(包括单位)
• dragEnd表示滑块结束滑动的回调,返回当前选择的数值(包括单位)
• getCurrentvalue实例上的方法，返回当前选择的值
• setCurrentValue实例上的方法, 设置当前滑动选择框的值，需要传入当前设置的值和总值
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.国际惯例, 最简单的滑块就是这个样子的,代码非常精炼，但是功能却不少

var test = new xui.sliderBar({
    id: 'sliderBar',
    dragMove(val){
        console.log(val)
    },
    dragEnd(val){
        xui.message(val);
    }
});
document.getElementById('getValue').addEventListener('click', function(){
    xui.message(test.getCurrentvalue());
});
document.getElementById('setValue').addEventListener('click', function(){
    let ran = Math.round(Math.random() * 100);
    test.setCurrentValue(ran, 100);
});

2.同样我也提供了一些自定义的配置项，希望可以满足各种需求

new xui.sliderBar({
    id: 'sliderBar1',
    currentVal: .5,
    unit: '℃',
    max: 1000,
    precision: 1,
    dragEnd(val){
        xui.message(val);
    }
});