如何使用@material-ui/core的Slider实现轨道分段显示不同颜色

实现思路 #

• 因为Slider取值范围为-10~10，中点0刚好对应轨道总长度的50%位置，直接用CSS线性渐变即可分割两个颜色区间
• 已选中轨道（Track）根据当前滑块值动态调整背景，值小于等于0时全显示红色，值大于0时用渐变保留前半段红色、后半段显示绿色

完整代码示例（MUI v5 版本） #

import { useState } from 'react';
import Slider from '@mui/material/Slider';

export default function CustomColorSlider() {
  const [sliderValue, setSliderValue] = useState(0);

  const handleSliderChange = (event, newValue) => {
    setSliderValue(newValue);
  };

  return (
    <Slider
      min={-10}
      max={10}
      step={1}
      value={sliderValue}
      onChange={handleSliderChange}
      sx={{
        width: 300,
        // 未选中轨道样式：-10~0红色，0~10绿色
        '& .MuiSlider-rail': {
          background: 'linear-gradient(to right, #f44336 50%, #4caf50 50%)',
          opacity: 1,
        },
        // 已选中轨道动态样式
        '& .MuiSlider-track': {
          background: sliderValue <= 0 
            ? '#f44336' 
            : 'linear-gradient(to right, #f44336 50%, #4caf50 calc(50% + 1px))',
          border: 'none',
        },
        // 可选：自定义滑块样式
        '& .MuiSlider-thumb': {
          backgroundColor: '#fff',
          border: '2px solid currentColor',
        }
      }}
    />
  );
}

MUI v4 兼容写法 #

如果使用的是@material-ui/core v4版本，用makeStyles替代sx属性即可：

import { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles({
  root: {
    width: 300,
    '& .MuiSlider-rail': {
      background: 'linear-gradient(to right, #f44336 50%, #4caf50 50%)',
      opacity: 1,
    },
    '& .MuiSlider-track': {
      border: 'none',
    },
    '& .MuiSlider-thumb': {
      backgroundColor: '#fff',
      border: '2px solid currentColor',
    }
  },
  trackRed: {
    background: '#f44336',
  },
  trackCross: {
    background: 'linear-gradient(to right, #f44336 50%, #4caf50 calc(50% + 1px))',
  }
});

export default function CustomColorSlider() {
  const classes = useStyles();
  const [sliderValue, setSliderValue] = useState(0);

  const handleSliderChange = (event, newValue) => {
    setSliderValue(newValue);
  };

  return (
    <Slider
      className={classes.root}
      min={-10}
      max={10}
      step={1}
      value={sliderValue}
      onChange={handleSliderChange}
      classes={{
        track: sliderValue <=0 ? classes.trackRed : classes.trackCross
      }}
    />
  );
}

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