Material-UI Slider didn't change active range color

Question

I'm making Range Slider component from zero to ten. It should color values that inside the range from the box, but it doesn't.

Here is My Slider Component

export function VoteRange({ voteRange, setVoteRange }) {
  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setVoteRange(newValue);
  };

  return (
    <div className={classes.root}>
      <Slider
        value={voteRange}
        onChange={handleChange}
        valueLabelDisplay="auto"
        min={0}
        max={10}
        marks={marks}
      />
    </div>
  );
}

Handlers from controller

const [voteRange, setVoteRange] = useState([0, 10]);

Marks values

const marks = [
  {
    value: 0,
    label: '0',
  },
  {
    value: 5,
    label: 5,
  },
  {
    value: 10,
    label: 10,
  },
];

I have read the API but didn't find any solution

I expect to see marks in range with active color but when Slider set to 0-10 only '0' and '1' are active. (when Slider set to 0-9 and lower only '0' active)

Answer 1

将软件包@ material-ui / lab从4.0.0-alpha.16更新到4.0.0-alpha.18可解决此问题