jQuery滑块插件，可实例多个，可滑动和点击操作(原创)

 查看演示  website  立即下载

更新时间：2019/5/21 上午12:37:03

1.新增updateValue（）方法

使用方式：

var pro = $('.progress').Progress({
            val: 0, //滑块默认值0-100      
            tip: false, //是否显示数值提示       
            size: 4,
            toFixed: 2,
            title: true, //是否鼠标滑入滑块时显示数值，默认为false      
            getVal: function(res) {
                //获取滑块val值        
                console.log(res)
            }
        }）

 pro.updateValue(val) updateValue()与 setVal效果一样都设置默认val和实现动态渲染， 但是updateValue更为灵活， 你可以在任何情况调用。 推荐使用， 当然你任然可以继续使用setVal方法。

 updateValue()实现动态渲染案例：

var timeID
var cont = 0 timeID = setInterval(function() {
    cont += 0.1 pro.updateValue(cont) if (cont >= 100) {
        clearInterval(timeID)
    }
}, 15)

2. bug修复， 修复鼠标点击时， 定位不准确（ css问题） 解决如下

.ProgressLine::before {
    border: 6 px solid# fff;transform: translate(6 px, -50 % );
}

自行设置transform: translateX的值与broder一致即可

更新时间：2019/5/16 上午11:25:46

更新说明：新增两个参数 toFixe,title

title: false, //是否鼠标滑入滑块时显示数值title提示，默认为false

toFixed: 0, //精准数值设置，当滑块长度过长时,可以设置此参数调整改val的改变频率，默认值0或不设置，建议最大设置为2。此参数可配合setVal（），getVal（）使用。 

例如： 控制视频播放进度的进准度

toFixed: 2, getVal: function(res) {
    video.currentTime = (video.duration * res) / 100
}, setVal: function(setValue) {
    video.addEventListener('timeupdate', function() {
        var pro = (video.currentTime / video.duration) * 100 setValue(pro)
    })
}

更新时间：2019/5/15 下午9:47:40

更新说明：

1. 修复设置val默认值时，滑块显示长度不准确的BUG

2. 优化了获取值val的方法，新增根据动态数据更新滑块的长度，类似视频播放进度

使用方法如下：

$('.progress').Progress({
    val: 0, //滑块默认值0-100       
    tip: true, //是否显示数值提示        
    getVal: function(res) {
        //获取滑块val值       
        console.log(res)
    },
    setVal: function(setValue) {
        //setValue(cont) 动态根据动态数组更新长度回调方法，         
        //示例：例如视频进度条        
        var timeID
        var cont = 0 timeID = setInterval(function() {
            cont++setValue(cont) if (cont >= 100) {
                clearInterval(timeID)
            }
        }, 100)
        //需结合实际开发使用      
    }
})

更新时间：2019/5/13 上午10:03:18

更新说明：增加方向设置 direction: 'vertical'//设置显示方向 默认horizontal 水平，vertical 垂直

发布时间：2019-05-12 23:30:03

使用方法：

引入css:

<link rel="stylesheet" href="css/progress.css">

引入js:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/progress.js"></script>

调用与配置

html:

<div class="progress"></div>

css:

.progress{
 width: 400px;/*可设置宽度，高度不必设置*/
}

js: 

$('.progress').Progress({
    width: 80, //滑块默认值0-100，可不写默认值0
    height: 10, //设置滑块高度，可不写默认值20
    tip: true， //是否显示数值提示，可不写默认值true
    drag: true, //默认是否能够拖拽，可不写默认值true
}).find('.progressVal').on('DOMNodeed', function() {
    console.log($(this).text()); //滑块改变获取值1-100
});

tip:  css样式可自行修改

PREVIOUS:
NEXT:
html5小游戏飞翔的小鸟
基于swiper的画廊