noUiSlider进度条使用

项目开发需要一个进度条去美化界面(本人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' 等

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,356评论 0 3
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,060评论 0 2
  • 找到fullcalendar.js, 找到代码为 isRTL:false,这句话 输入以下几句 monthName...
    迷你小小白阅读 1,735评论 0 1
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,613评论 0 7
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,112评论 1 10