本篇文章给大家带来的内容是关于如何使用javascript+css实现自定义拖动进度条（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
自定义可拖动的进度条，如下图效果：
代码分三部分
HTML
立即学习“Java免费学习笔记（深入）”；
CSS
#demo {
width: 600px; height: 100px; margin: 100px auto;
display: flex; align-items: center;
}
#demo .progress {
width: 100%; height: 6px; border-radius: 3px;
background: #F1F5FD;
}
#demo .progress .progress-bar {
width: 40%; height: 100%; border-radius: 3px;
background: #0072FF;
}
#demo .progress .progress-bar .progress-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF;
float: right;
position: relative; left: 7px; top: -5px;
}到这步就基本实现了自定义的样式，只需改变 .progress-bar 的 width 就能显示不同的进度；接下来给进度条加上拖动事件
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
JavaScript
说明：
1. 将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验；
2. JS 用纯原生语法书写，如果用 JQuery 可以简化选择器和 CSS 样式的获取；
3. 鼠标在滚动条外的移动，本文使用 clientX 来计算。
