如何创建带内置标签的自定义Input Slider？

要实现滑块轨道带分段标签、左侧白色选中区域的效果，可按以下代码修改实现：

修改后的HTML结构 #

在滑块容器内添加标签容器，放置轨道分段标签：

<div class="slider-container">
  <!-- 分段标签容器 -->
  <div class="slider-labels">
    <span>100</span>
    <span>200</span>
    <span>300</span>
    <span>400</span>
    <span>500</span>
    <span>600</span>
    <span>700</span>
    <span>800</span>
    <span>900</span>
    <span>1000</span>
  </div>
  <input
    type="range"
    min="100"
    max="1000"
    step="100"
    value="500"
    class="slider"
    id="range"
  />
</div>

调整后的CSS样式 #

修改滑块轨道样式，用伪元素实现左侧白色选中区域，同时设置标签定位与样式：

.slider-container {
  position: relative;
  width: 80%;
  margin: 50px auto;
}

/* 分段标签样式 */
.slider-labels {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -25px;
  width: 100%;
  font-size: 14px;
  color: #333;
}

.slider-container .slider {
  -webkit-appearance: none;
  width: 100%;
  height: 50px;
  border-radius: 30px;
  background: #b5b33c;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  margin: 0;
}

.slider-container .slider:hover {
  opacity: 1;
}

/* WebKit 轨道样式 - 实现白色选中区域 */
.slider::-webkit-slider-runnable-track {
  height: 50px;
  -webkit-appearance: none;
  background: linear-gradient(to right, #fff 0%, #fff var(--value-percent), #b5b33c var(--value-percent), #b5b33c 100%);
  border-radius: 30px;
}

/* Firefox 轨道样式 */
.slider::-moz-range-track {
  height: 50px;
  background: #b5b33c;
  border-radius: 30px;
}

.slider::-moz-range-progress {
  height: 50px;
  background: #fff;
  border-radius: 30px;
}

/* 滑块样式 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: #54565a;
  margin-top: 0;
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: #54565a;
  border: none;
}

添加JavaScript同步选中区域 #

监听滑块变化，计算选中百分比并更新CSS变量，确保WebKit内核浏览器正确显示白色选中区域：

const slider = document.getElementById('range');

// 初始化百分比计算
updateValuePercent(slider);

// 监听滑块值变化
slider.addEventListener('input', () => {
  updateValuePercent(slider);
});

function updateValuePercent(slider) {
  const min = parseInt(slider.min);
  const max = parseInt(slider.max);
  const value = parseInt(slider.value);
  const percent = ((value - min) / (max - min)) * 100;
  slider.style.setProperty('--value-percent', `${percent}%`);
}

关键说明 #

• 调整滑块min/max/step参数，使其与分段标签对应
• WebKit浏览器通过CSS渐变+变量实现白色选中区域，Firefox直接使用::-moz-range-progress伪元素实现
• 标签容器通过绝对定位置于滑块上方，flex布局保证标签均匀分布

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