如何将slider-thumb右侧区域设置为灰色？

要实现滑块thumb右侧区域为灰色且允许thumb超出input范围，可以通过额外容器作为背景层的方式实现，无需给input设置overflow:hidden，具体实现如下：

实现思路 #

用容器包裹滑块input，容器设置灰色背景作为滑块的“未选中区域”（thumb右侧），滑块自身的track仅保留左侧渐变选中区域，利用层级关系让容器灰色在track右侧显示，同时thumb可不受限制地超出input范围。

完整代码 #

HTML #

<div class="slider-container">
  <input type="range" />
</div>

CSS #

/* 容器作为滑块灰色背景层 */
.slider-container {
  width: 255px;
  height: 16px;
  background-color: #e0e0e0; /* 右侧灰色区域 */
  border-radius: 21.6px;
  position: relative;
}

input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 16px;
  cursor: pointer;
  box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);
  background: linear-gradient(180deg, #D012FF 0%, #0B9191 100%);
  border-radius: 21.6px;
  /* 动态调整渐变区域宽度，对应滑块选中部分 */
  background-size: var(--slider-value, 0%) 100%;
  background-repeat: no-repeat;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78);
  border: 3px solid #FFFFFF;
  border-radius: 8px;
  background: linear-gradient(180deg, #A00BC5 0%, #1B5454 100%);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.8px;
  height: 32px;
  width: 16.22px;
  position: relative;
  z-index: 1; /* 确保thumb显示在最上层 */
}

补充JS（同步滑块选中区域） #

CSS无法直接获取滑块值，需用JS动态更新渐变区域宽度：

const slider = document.querySelector('input[type=range]');
// 初始化设置
const initPercentage = ((slider.value - slider.min)/(slider.max - slider.min)) * 100;
slider.style.setProperty('--slider-value', `${initPercentage}%`);
// 拖动滑块时更新
slider.addEventListener('input', () => {
  const percentage = ((slider.value - slider.min)/(slider.max - slider.min)) * 100;
  slider.style.setProperty('--slider-value', `${percentage}%`);
});

说明 #

• 容器灰色背景作为未选中的右侧区域，滑块track通过background-size动态匹配选中范围
• thumb设置层级确保显示在最上层，无需限制overflow，可自由超出input范围

内容的提问来源于stack exchange，提问作者blnk.off