1、效果图

效果图

2、HTML代码

<div style="margin: 20vh auto;width: 400px;">
    <div id="sliderBar">
        <!-- 空槽 -->
        <div class="slot"></div>
        <!-- 进度条 -->
        <div id="process" class="slot"></div>
        <!-- 滑块 -->
        <div id="slider"></div>
        <!-- 百分比 -->
        <span id="percent">0.0%</span>
    </div>
</div>

3、JavaScript代码

let width = document.getElementById('sliderBar').offsetWidth
let process = document.getElementById('process') // 进度条
let slider = document.getElementById('slider') // 滑块
let percent = document.getElementById('percent') // 百分比
let max = width - slider.offsetWidth // 移动最大距离（容器宽度 - 滑块宽度）
let startX = 0, // 点击开始位置
    moveX = 0, // 移动距离
    currentX = 0, // 当前位置
    isDrag = false  // 是否允许拖动

// 鼠标移动事件
let moveEvent = function(e){
    if(isDrag){
        let diffX = e.clientX - startX // 拖动距离
        moveX = diffX + currentX // 总移动距离
        if(moveX < 0) moveX = 0
        if(moveX > max) moveX = max
        let pre = (moveX / max * 100).toFixed(1) + '%'  // 百分比
        percent.innerText = pre
        slider.style.left = moveX + 'px'
        process.style.width = (moveX + 10) + 'px'   // 多加一段隐藏进滑块里
    }
    e.stopPropagation()
}

// 鼠标抬起事件
let mouseupEvent = function(e){
    isDrag = false
    currentX = moveX // 记录当前位置
    // 移除事件监听
    document.removeEventListener('mousemove', moveEvent)
    document.removeEventListener('mouseup', mouseupEvent)
    e.stopPropagation()
}
// 滑块添加鼠标左键按下事件，e.button的值： 0鼠标左键，1鼠标右键。
slider.addEventListener('mousedown', function(e){
    if (e.button === 0) {
        isDrag = true // 允许拖拽
        startX = e.clientX // 记录开始位置
        document.addEventListener('mousemove', moveEvent)
        document.addEventListener('mouseup', mouseupEvent)
    }
    e.stopPropagation()
})

4、移动端事件方法

以上的是网页端的拖拽方法，不支持移动端，移动端的事件方法如下：

/*  ------ ↓ 移动端.事件方法 ↓ ------  */

let touchmoveEvent = function(e){
    if(isDrag){
        moveX = e.touches[0].clientX - startX + currentX
        if(moveX < 0) moveX = 0
        if(moveX > max) moveX = max
        let pre = (moveX / max * 100).toFixed(1) + '%'  // 百分比
        percent.innerText = pre
        slider.style.left = moveX + 'px'
        process.style.width = (moveX + 10) + 'px'
    }
    e.stopPropagation()
}

let touchendEvent = function(e){
    isDrag = false
    currentX = moveX
    // 移除事件监听
    document.removeEventListener('touchmove', touchmoveEvent)
    document.removeEventListener('touchend', touchendEvent)
    e.stopPropagation()
}

slider.addEventListener('touchstart', function(e){
    isDrag = true
    startX = e.touches[0].clientX
    document.addEventListener('touchmove', touchmoveEvent)
    document.addEventListener('touchend', touchendEvent)
    e.stopPropagation()
})

5、css代码

#sliderBar{
    position: relative;
    width: 100%;
}
.slot{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 8px;
    background-color: #ccc;
    z-index: 10;
    border-radius: 5px;
}
#process{
    background-color: #0055ff;
    background: linear-gradient(to right, #00e9e9, #0055ff);
    z-index: 20;
    width: 0;
}
#slider{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 31px;
    z-index: 30;
    cursor: move;
    background-image: url('img/slider_icon.png');
    background-size: cover;
}
#percent{
    position: absolute;
    top: 50%;
    right: -60px;
    transform: translateY(-50%);
    color: #aaa;
}