如何修改React中input range滑块光标左侧范围栏的颜色？

要实现滑块左侧轨道变色，原生<input type="range">在WebKit内核浏览器下没有直接的伪元素控制左侧区域，我们可以通过CSS渐变结合动态变量的方式实现，步骤如下：

1. 调整React组件，同步值到CSS变量 #

在input元素上添加style属性，把当前的brightness_value同步为CSS自定义属性：

<input 
  className="range-input" 
  type="range" 
  name="speed" 
  min="0" 
  max="100" 
  value={brightness_value} 
  onChange={handleSliderChange}
  style={{ '--value': brightness_value }}
/>

2. 修改CSS样式，用渐变实现左侧变色 #

更新.range-input的背景样式，利用CSS变量计算渐变的终止位置，同时调整滑块层级避免被覆盖：

.range-input {
  -webkit-appearance: none; 
  appearance: none;
  cursor: pointer; 
  /* 用线性渐变实现左侧变色，--value对应当前滑块值 */
  background: linear-gradient(to right, #42b983 0%, #42b983 calc(var(--value) * 1%), white calc(var(--value) * 1%), white 100%);
  height: 14px; 
  width: 100%; 
  border-radius: 10px; 
  outline: 0; 
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; 
  background: white; 
  width: 24px; 
  height: 24px;
  border-radius: 50%; 
  cursor: pointer; 
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); 
  /* 确保滑块在轨道上方 */
  position: relative;
  z-index: 1;
}

/* 可选：兼容Firefox浏览器 */
.range-input::-moz-range-track {
  background: white;
  height: 14px;
  border-radius: 10px;
}
.range-input::-moz-range-progress {
  background: #42b983;
  height: 14px;
  border-radius: 10px;
}

说明 #

• 把示例中的#42b983替换成你需要的左侧轨道颜色即可
• WebKit内核浏览器通过渐变位置计算实现变色，Firefox有原生伪元素::-moz-range-progress可直接控制左侧轨道
• 滑块设置position: relative和z-index是为了避免被渐变轨道遮挡

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