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

查看演示立即下载

插件描述：基于jquery滑块插件，可实例多个，可配置。

更新时间：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:

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

引入js:

1 2	`<script` `src="/"></script>` `<script` `src="js/progress.js"></script>`

调用与配置

html:

1	`<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样式可自行修改

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：基于swiper的画廊
下一个特效： html5小游戏飞翔的小鸟