1、效果圖

效果圖

2、HTML代碼

<div style="margin: 20vh auto;width: 400px;">
    <div id="sliderBar">
        <!-- 空槽 -->
        <div class="slot"></div>
        <!-- 進(jìn)度條 -->
        <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') // 進(jìn)度條
let slider = document.getElementById('slider') // 滑塊
let percent = document.getElementById('percent') // 百分比
let max = width - slider.offsetWidth // 移動(dòng)最大距離（容器寬度 - 滑塊寬度）
let startX = 0, // 點(diǎn)擊開(kāi)始位置
    moveX = 0, // 移動(dòng)距離
    currentX = 0, // 當(dāng)前位置
    isDrag = false  // 是否允許拖動(dòng)

// 鼠標(biāo)移動(dòng)事件
let moveEvent = function(e){
    if(isDrag){
        let diffX = e.clientX - startX // 拖動(dòng)距離
        moveX = diffX + currentX // 總移動(dòng)距離
        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'   // 多加一段隱藏進(jìn)滑塊里
    }
    e.stopPropagation()
}

// 鼠標(biāo)抬起事件
let mouseupEvent = function(e){
    isDrag = false
    currentX = moveX // 記錄當(dāng)前位置
    // 移除事件監(jiān)聽(tīng)
    document.removeEventListener('mousemove', moveEvent)
    document.removeEventListener('mouseup', mouseupEvent)
    e.stopPropagation()
}
// 滑塊添加鼠標(biāo)左鍵按下事件，e.button的值： 0鼠標(biāo)左鍵，1鼠標(biāo)右鍵。
slider.addEventListener('mousedown', function(e){
    if (e.button === 0) {
        isDrag = true // 允許拖拽
        startX = e.clientX // 記錄開(kāi)始位置
        document.addEventListener('mousemove', moveEvent)
        document.addEventListener('mouseup', mouseupEvent)
    }
    e.stopPropagation()
})

4、移動(dòng)端事件方法

以上的是網(wǎng)頁(yè)端的拖拽方法，不支持移動(dòng)端，移動(dòng)端的事件方法如下：

/*  ------ ↓ 移動(dòng)端.事件方法 ↓ ------  */

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
    // 移除事件監(jiān)聽(tīng)
    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;
}