React中如何根据range滑块取值动态修改其对应轨道区域的颜色

你可以通过 React 状态管理 + CSS 动态渐变的方式实现需求，以下是完整可运行的代码：

1. 组件代码（JSX） #

import { useState } from 'react';
import './Slider.css';

export default function CustomSlider() {
  const [value, setValue] = useState(50);

  const handleChange = (e) => {
    setValue(Number(e.target.value));
  };

  return (
    <div className="slidecontainer">
      <h1>自定义渐变滑块</h1>
      <input
        type="range"
        min="1"
        max="100"
        value={value}
        className="slider"
        onChange={handleChange}
        style={{
          '--value-percent': `${value}%`,
          '--track-color': value <= 50 
            ? `linear-gradient(to right, #165DFF 0 var(--value-percent), #d3d3d3 var(--value-percent) 100%)`
            : `linear-gradient(to right, #165DFF 0 50%, #722ED1 50% var(--value-percent), #d3d3d3 var(--value-percent) 100%)`
        }}
      />
      <p>当前值：<span>{value}</span></p>
    </div>
  )
}

2. 样式代码（Slider.css） #

.slidecontainer {
  width: 100%;
  padding: 20px;
}

.slider {
  -webkit-appearance: none;
  width: 200px;
  height: 15px;
  border-radius: 5px;
  /* 用行内传入的渐变作为轨道背景 */
  background: var(--track-color);
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

/* 适配webkit内核浏览器的滑块按钮 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

/* 适配火狐浏览器的滑块按钮 */
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

/* 火狐浏览器默认轨道样式重置 */
.slider::-moz-range-track {
  background: transparent;
}

实现说明 #

• 用useState钩子管理滑块的当前取值，通过onChange事件实时更新状态
• 利用CSS变量动态传入渐变背景：
  • 取值≤50时，从左到当前滑块位置为蓝色，剩余部分为灰色
  • 取值>50时，0-50%为蓝色，50%到当前滑块位置为紫色，剩余部分为灰色
• 额外做了不同浏览器的兼容处理，保证显示效果一致，你可以根据需求自行调整蓝色、紫色的色值

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture