如何用纯CSS+HTML实现双色轨道Range滑块及自定义Thumb样式

问题描述 #

我有一个range类型的滑块输入控件，希望为滑块轨道设置两种颜色（滑块当前值左侧与右侧分色），同时自定义滑块的thumb（圆形滑块）颜色。不借助任何库，仅用纯CSS和HTML是否可行？

可行方案 #

完全可以实现，通过结合CSS伪元素、CSS变量和少量JavaScript即可完成跨浏览器的效果。以下是完整实现代码：

HTML代码

<div class="slider-info">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

CSS代码

/* 容器相对定位，用于承载轨道伪元素 */
.slider-info {
  position: relative;
  width: 100%;
}

/* 基础滑块样式：隐藏默认轨道，避免干扰自定义样式 */
input.slider {
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
}

/* === Webkit浏览器（Chrome、Safari等）样式 === */
/* 自定义圆形滑块thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb; /* 自定义滑块颜色，可修改 */
  cursor: pointer;
  position: relative;
  z-index: 2; /* 确保滑块在轨道上层 */
}

/* 未选中区域轨道样式 */
input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 3px;
  background: #e5e7eb; /* 轨道右侧未选中颜色 */
}

/* 选中区域轨道：用父容器伪元素模拟 */
.slider-info::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* 通过CSS变量动态计算宽度，减去滑块一半宽度保证对齐中心 */
  width: calc(var(--slider-value, 50%) - 10px);
  height: 10px;
  border-radius: 3px;
  background: #A4FFAF; /* 轨道左侧选中颜色 */
  pointer-events: none; /* 不干扰滑块交互 */
  z-index: 1;
}

/* === Firefox浏览器样式 === */
/* 自定义圆形滑块thumb */
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb; /* 与webkit滑块颜色保持一致 */
  cursor: pointer;
  border: none;
  position: relative;
  z-index: 2;
}

/* 未选中区域轨道样式 */
input[type=range]::-moz-range-track {
  height: 10px;
  border-radius: 3px;
  background: #e5e7eb;
}

/* 选中区域轨道：Firefox原生支持该伪元素 */
input[type=range]::-moz-range-progress {
  height: 10px;
  border-radius: 3px;
  background: #A4FFAF;
}

JavaScript代码（用于Webkit浏览器动态更新轨道宽度）

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

// 监听滑块输入事件，更新CSS变量
slider.addEventListener('input', function() {
  // 计算当前值占总范围的百分比
  const valuePercent = ((this.value - this.min) / (this.max - this.min)) * 100;
  this.parentElement.style.setProperty('--slider-value', `${valuePercent}%`);
});

// 页面加载时初始化轨道宽度
slider.dispatchEvent(new Event('input'));

关键说明 #

• Webkit浏览器没有原生的已选中轨道伪元素，因此通过父容器的::before伪元素模拟，结合CSS变量和JS动态计算宽度。
• Firefox浏览器原生提供::-moz-range-progress伪元素，直接设置样式即可实现选中区域分色。
• 滑块thumb统一设置为圆形，通过z-index确保在轨道上层，避免被遮挡。

内容的提问来源于stack exchange，提问作者V.Villacis