html+css+js实现Slider滑块

实现效果：

HTML部分：

<div class="slider-container">
  <div class="slider">
      <div class="progress-bar"></div>
      <div class="circle"></div>
      <div class="progress-text">0</div>
    </div>
</div>

CSS部分：

<style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .slider-container{
      margin: 150px auto;
      width: 500px;
    }
    .slider{
      position: relative;
      width: 100%;
      height: 15px;
      background-color:#e4e7ed ;
      border-radius: 8px;
      cursor: pointer;
    }
    .progress-bar{
      position: absolute;
      width: 0;
      height: 15px;
      background-color: #409eff;
      border-radius: 8px;
    }
    .circle{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -14px;
      width: 28px;
      height: 28px;
      border: 2px solid #409eff;
      background-color: #fff;
      border-radius: 50%;
      cursor: grab;
    }
    .circle:hover{
      transform: translateY(-50%) scale(1.3);
    }
    .circle:hover + .progress-text{
      opacity: 1;
    }
    .progress-text{
      position: absolute;
      top: -60px;
      left: -8px;
      color: #fff;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .progress-text::after{
      content: '';
      position: absolute;
      /* 使伪元素左边缘位于父元素中间 */
      left: 50%;
      width: 40px;
      height: 40px;
      background-color: #303133;
      border-radius:20px 20px 20px 1px ;
      transform-origin: left bottom;
      transform: rotate(-45deg);
      z-index: -1;
    }
  </style>

JS部分： 

<script>
    const slider = document.querySelector('.slider');
    const progressBar = document.querySelector('.progress-bar');
    const circle = document.querySelector('.circle');
    const progressText = document.querySelector('.progress-text');

    // 1.鼠标点击滑动条时更新圆形手柄的位置
    slider.addEventListener('click',(e)=>{
      // 滑动条宽度
      const width = slider.offsetWidth;
      // clickX 用于获取用户点击时鼠标指针的位置
      const clickX=e.clientX-slider.offsetLeft
      // 计算点击位置的百分比
      const percentage=Math.min(100, Math.max(0, (clickX/width)*100))
      console.log(percentage);
      // 更新圆形手柄的位置
      updateCirclePosition(percentage);
    })

    // 更新手柄位置
    function updateCirclePosition(percentage){
      const width=slider.offsetWidth
      const newPosition=(percentage/100)*width-12
      if(percentage===0){
        circle.style.left='-14px';
        progressBar.style.width = '0px';
      }else if(percentage === 100){
        circle.style.left=width-12 + 'px';
        progressBar.style.width = width + 'px';
      }else{
        circle.style.left =newPosition + 'px';
        progressBar.style.width=newPosition + 12 + 'px';
      }
      progressText.style.left = newPosition + 'px';
      progressText.innerHTML=`${Math.round(percentage)}`;
    }

    //isDragging→用于追踪是否正在拖拽圆形手柄
    let isDragging=false
    // 鼠标按下圆形手柄时开始拖动
    circle.addEventListener('mousedown', () => {
      isDragging = true;
      document.addEventListener('mousemove', onMouseMove); // 添加mousemove事件监听
      document.addEventListener('mouseup', onMouseUp); // 添加mouseup事件监听
    });

    // 鼠标移动时更新圆形手柄的位置
    function onMouseMove(e) {
      if (isDragging) {
        const width = slider.offsetWidth;
        const clickX = e.clientX - slider.offsetLeft;
        const percentage = Math.min(100, Math.max(0, (clickX / width) * 100));
        updateCirclePosition(percentage);
      }
    }

    // 鼠标释放时停止拖动
    function onMouseUp() {
      isDragging = false;
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }
</script>