noUiSlider进度条使用

项目开发需要一个进度条去美化界面（本人Html前端仅仅熟悉），这里把使用经历记录一下，以后遇到同样需求可以参考。

1、首先引入相应的js

,样式采用自定义的，就不引用了，下载地址https://github.com/leongersen/noUiSlider/releases

2、定义div容器

3、初始化滑块

var startCloud = 20;

var slider = document.getElementById('sliderRegular');

/**

* 初始化右侧查询条件中云量滑动条

*/

function initCloudSlider(){

noUiSlider.create(slider, {

        start: startCloud,

        connect: [true,false],

        step:1,

        range: {

            min:0,

            max:100

        }

});

    //给滑动条绑定update事件，当滑动条被拖动时，更新滑动条右侧显示数值

    slider.noUiSlider.on('update', function(values, handle, unencoded, tap, positions) {

            //values为一个数组，取第一个,具体是啥可以自己打印出来看

            var num = values[0].split(".",1)

            $('#cloudValue').html(num+" %");

    });

}

//初始化

var reset = function(){

    slider.noUiSlider.updateOptions( {

        start:startCloud

    })

    $('#cloudValue').html(startCloud+" %");

}

4、其他常用方法

slider.setAttribute('disabled',true);//设置不可编辑

slider.removeAttribute('disabled');//设置重新可滑动

slider.noUiSlider.updateOptions({range:{'min':20,'max':50}});//更新滑块信息，可配置选项有'margin', 'padding', 'limit', 'step', 'range', 'pips', 'tooltips', 'animate' and 'snap' 等