滑块 "before" 栏重叠在 HTML/CSS/JS 中的拇指顶部

Question

我正在制作一个带有滑块控制栏的网络音频播放器。我使用 <input type="slider"> 标签来显示滑块，我已经让它工作了 90%。现在唯一的问题是“之前”栏，在 CSS 中使用“.slider:before”实现，重叠在拇指按钮的顶部（尤其是当您将拇指移向末尾时）。这是它的样子：

我想看看如何使较暗的“之前”栏隐藏在拇指下方

这是我的代码

const seekSlider = document.getElementById('slider');
    
const showRangeProgress = (rangeInput) => {
  seekSlider.style.setProperty('--seek-before-width', `${rangeInput.value}%`);
}

seekSlider.addEventListener('input', (e) => {
    showRangeProgress(e.target);
})

input[type="range"] {
      width: 185px;
    }
    
    .slider {
      position: relative;
      margin-left: 10px;
      cursor: pointer;
      -webkit-appearance: none;
      height: 10px;
      outline: none;
      margin-top: 7px;
      margin-bottom: -3px;
      opacity: 0.7;
      transition: 0.3s;
    }
    
    .slider::-webkit-slider-runnable-track {
      height: 3px;
      background: rgba(66, 64, 70, 0.15);
    }
    
    .slider::before {
      position: absolute;
      content: "";
      width: var(--seek-before-width);
      height: 3px;
      margin-top: 4px;
      background-color: rgba(203, 195, 227, 0.8);
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 8px;
      height: 8px;
      background: #a8a3b3;
      border-radius: 50%;
      margin-top: -2px;
    }

<div id="controls" class="controls">
  <input id="slider" type="range" value="0" max="100" class="slider">
  <p id="time" class="time">0:00</p>
  <p class="endtime">3:25</p>
</div>

这是我想要实现的目标：

任何帮助将不胜感激:)

Answer 1

将 z-index:-1; 属性 添加到您的 .slider::before class 即可。

试试下面的代码片段

const seekSlider = document.getElementById('slider');
        
const showRangeProgress = (rangeInput) => {
  seekSlider.style.setProperty('--seek-before-width', `${rangeInput.value}%`);
}

seekSlider.addEventListener('input', (e) => {
    showRangeProgress(e.target);
})

input[type="range"] {
          width: 185px;
        }
        
        .slider {
          position: relative;
          margin: 10px;
          cursor: pointer;
          height: 9px;
          outline: none;
          opacity: 0.7;
          transition: 0.3s;
        }
        
        .slider::-webkit-slider-runnable-track {
          height: 3px;
          background: rgba(66, 64, 70, 0.15);
        }
        
        .slider::before {
          position: absolute;
          content: "";
          width: var(--seek-before-width);
          height: 3px;
          margin-top: 4px;
          z-index:-1;
        }
        
        .slider::-webkit-slider-thumb {
          width: 9px;
          height: 9px;
          margin-top:-6px;
          background: #a8a3b3;
          border-radius: 50%;
          background-color:grey;
        }

<input id="slider" type="range" value="0" max="100" class="slider">

Definition and Usage: the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).