H5 移动端拖拽进度条

 最近业务需要移动移动端可拖拽的进度条,用来做音乐播放器,简单研究了一下

<div class="bar_wrap" id="wrap">

</div>



css

.bar_wrap{
        // width: 100%;
        background-color: aliceblue;
        // height: 20px;
        margin-top: 20px;
}

/**
 * name 元素选择器 string
 * wrapHeight 外层容器高度
 * cb 回调函数 参数为当前进度值 已经处理为整数 (value:number)void=>
 * eBarDragColor string 拖拽物体的颜色
 * eBarConColor string  拖拽进度颜色
 * eBarDragWidth number 拖拽物体的大小
 * isRadius boo 是否是圆形
 * Function setValue (number):void=> set progress width
 */

class Slide {
    constructor(name, cb, option={eBarDragColor :'red', eBarConColor :'aqua', eBarDragWidth:20, isRadius:true,wrapHeight:'20px'}) {
        this.element = document.querySelector(name)
        // 外层进度盒子样式处理
        this.element.style.position = 'relative'
        this.element.style.height = option.wrapHeight