如何用CSS实现滑块高亮区域的背景透明效果

原生<input type="range">的轨道是单一元素，没法直接实现「滑块thumb覆盖区域透明、透出下方内容」的效果——因为轨道背景是统一设置的。我们可以用遮罩层+JS实时计算的方式模拟这个需求：

实现思路 #

1. 用一个额外的遮罩元素模拟轨道的半透明背景，覆盖在内容上方
2. 隐藏原生滑块的视觉样式，但保留它的交互能力（拖动、点击）
3. 通过JS监听滑块的拖动事件，实时计算thumb的位置，用clip-path在遮罩层上挖空thumb对应的区域，让下方内容透出来

修改后的完整代码 #

HTML

<div class="wrapper">
  <!-- 下方内容，替换成你实际的内容 -->
  <div class="content">这里是要透出的下方内容</div>
  
  <div class="slider-parent">
    <!-- 模拟轨道的遮罩层 -->
    <div class="track-mask"></div>
    <input type="range" min="0" max="100" value="50" />
  </div>
</div>

CSS

.wrapper {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* 模拟下方内容背景，实际替换为你的内容样式 */
  background: #e0e0e0;
}

.content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
}

.slider-parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 让遮罩层不阻挡滑块交互 */
  pointer-events: none;
}

.slider-parent input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 隐藏原生滑块的视觉样式，保留交互 */
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* 模拟轨道的遮罩层样式，和你原来的轨道样式一致 */
.track-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(237, 231, 225, 0.75);
  border: 2px solid #f27b7f;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #a6a6a6;
  /* 初始clip-path，对应滑块默认值的位置 */
  clip-path: polygon(0 0, calc(50% - 12.5%) 0, calc(50% - 12.5%) 100%, 0 100%, 0 0, calc(50% + 12.5%) 0, calc(50% + 12.5%) 100%, 100% 100%, 100% 0);
}

/* 如果你需要在Firefox中保留thumb的视觉样式，可以加上这段 */
.slider-parent input[type="range"]::-moz-range-thumb {
  box-shadow: 1px 1px 2px #a6a6a6;
  border: 2px solid #f27b7f;
  height: 300px;
  width: 25%;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
}

JavaScript

const slider = document.querySelector('input[type="range"]');
const trackMask = document.querySelector('.track-mask');
// 和CSS中设置的thumb宽度百分比保持一致
const thumbWidthPercent = 25;

// 更新遮罩层的挖空区域
function updateTrackMask() {
  const sliderValue = parseInt(slider.value);
  const maxValue = parseInt(slider.max);
  // 计算thumb中心位置的百分比
  const thumbCenterPercent = (sliderValue / maxValue) * 100;
  // 计算thumb左右边界的百分比
  const thumbLeftPercent = thumbCenterPercent - thumbWidthPercent / 2;
  const thumbRightPercent = thumbCenterPercent + thumbWidthPercent / 2;

  // 动态设置clip-path，挖空thumb对应的区域
  trackMask.style.clipPath = `
    polygon(
      0 0, 
      ${thumbLeftPercent}% 0, 
      ${thumbLeftPercent}% 100%, 
      0 100%, 
      0 0, 
      ${thumbRightPercent}% 0, 
      ${thumbRightPercent}% 100%, 
      100% 100%, 
      100% 0
    )
  `;
}

// 页面加载时初始化遮罩位置
updateTrackMask();

// 监听滑块的拖动和变化事件
slider.addEventListener('input', updateTrackMask);
slider.addEventListener('change', updateTrackMask);

关键说明 #

• 遮罩层通过clip-path实现“非thumb区域半透明、thumb区域透明”的效果，polygon函数定义了遮罩的可见区域，挖空了thumb对应的矩形部分
• 原生滑块设置为透明但保留交互，确保用户的拖动操作正常生效
• JS实时计算thumb的位置，动态更新clip-path，让挖空区域跟随滑块移动

内容的提问来源于stack exchange，提问作者Andrii Vynarchuk