为滑块范围轨道设置样式：中点两侧为随滑块位置变色的形状

核心思路 #

基于原生<input type="range">，结合CSS变量和JavaScript，以滑块轨道中点为分界，根据滑块位置切换左右两侧颜色：

• 用CSS线性渐变将轨道拆分为左右两半，分别绑定CSS变量控制颜色
• 监听滑块的input事件，对比当前值与中点值，动态更新CSS变量的颜色值

完整代码示例 #

HTML

<div class="slider-wrap">
  <input type="range" min="0" max="100" value="50" class="mid-slider">
</div>

CSS

.slider-wrap {
  width: 320px;
  padding: 20px;
}

/* 重置原生滑块默认样式 */
.mid-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  /* 以50%位置为界，左右区域分别绑定CSS变量 */
  background: linear-gradient(to right,
    var(--left-track, #e0e0e0) 0%,
    var(--left-track, #e0e0e0) 50%,
    var(--right-track, #e0e0e0) 50%,
    var(--right-track, #e0e0e0) 100%);
  outline: none;
}

/* 自定义滑块按钮样式 */
.mid-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.mid-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
  border: none;
  position: relative;
  z-index: 1;
}

JavaScript

const slider = document.querySelector('.mid-slider');
const midValue = 50; // 对应max=100的中点值

// 初始化轨道颜色状态
updateTrackColors(slider.value);

// 监听滑块拖动事件
slider.addEventListener('input', () => {
  updateTrackColors(slider.value);
});

function updateTrackColors(currentValue) {
  if (currentValue >= midValue) {
    // 滑块在中点右侧：左侧轨道高亮，右侧轨道灰化
    slider.style.setProperty('--left-track', '#2196F3');
    slider.style.setProperty('--right-track', '#e0e0e0');
  } else {
    // 滑块在中点左侧：右侧轨道高亮，左侧轨道灰化
    slider.style.setProperty('--left-track', '#e0e0e0');
    slider.style.setProperty('--right-track', '#2196F3');
  }
}

扩展说明 #

如果设计图中轨道两侧是特殊形状（非纯色填充），可以将CSS渐变里的纯色替换为背景图片，或用伪元素模拟左右两段轨道，核心逻辑依旧是通过JS根据滑块位置切换样式类或CSS变量。

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