项目开发需要一个进度条去美化界面(本人Html前端仅仅熟悉),这里把使用经历记录一下,以后遇到同样需求可以参考。
1、首先引入相应的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><!--滑块数值展示区-->
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' 等