html怎么拖动进度条,html自定义拖动进度条，包含样式和事件

自定义可拖动的进度条，如下图效果：

代码分三部分

html

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; }

Pexelshttps://www.wode007.com/sites/73241.html 天堂图片网https://www.wode007.com/sites/73243.html

到这步就基本实现了自定义的样式，只需改变 .progress-bar 的 width 就能显示不同的进度；接下来给进度条加上拖动事件

JavaScript

关于本篇随笔，作者的考虑：

1. 将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验

2. js 用纯原生语法书写，如果用 JQuery 可以简化选择器和 css 样式的获取

3. 鼠标在滚动条外的移动，本文使用 clientX 来计算