項目開發(fā)需要一個進度條去美化界面（本人Html前端僅僅熟悉），這里把使用經(jīng)歷記錄一下，以后遇到同樣需求可以參考阻问。
1、首先引入相應(yīng)的js
<script src="../../nouislider/js/nouislider.min.js"></script>,樣式采用自定義的沦疾，就不引用了称近，下載地址https://github.com/leongersen/noUiSlider/releases
2、定義div容器
<div id="sliderRegular" ><!--滑塊指定div -->
<span id="cloudValue"></span><!--滑塊數(shù)值展示區(qū)-->
3哮塞、初始化滑塊
var?startCloud = 20;
var slider = document.getElementById('sliderRegular');
/**
* 初始化右側(cè)查詢條件中云量滑動條
*/
function initCloudSlider(){
noUiSlider.create(slider, {
? ??????start: startCloud,
? ? ? ? connect: [true,false],
? ? ? ? step:1,
? ? ? ? range: {
? ??????????min:0,
? ? ? ? ? ? max:100
? ? ? ? }
});
? ? //給滑動條綁定update事件刨秆，當滑動條被拖動時，更新滑動條右側(cè)顯示數(shù)值
? ? slider.noUiSlider.on('update', function(values, handle, unencoded, tap, positions) {
? ??????????//values為一個數(shù)組忆畅，取第一個,具體是啥可以自己打印出來看
? ? ? ??? ??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);//設(shè)置不可編輯
slider.removeAttribute('disabled');//設(shè)置重新可滑動
slider.noUiSlider.updateOptions({range:{'min':20,'max':50}});//更新滑塊信息，可配置選項有'margin',?'padding',?'limit',?'step',?'range',?'pips',?'tooltips',?'animate'?and?'snap' 等
