Question

我正在将Range Slider组件的数量从零增加到十。它应该为框内的范围内的值上色，但是不可以。

这是我的滑块组件

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>
  );
}

来自控制器的处理程序

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

标记值

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

我已经阅读了API，但是没有找到任何解决方案

我希望看到带有活动颜色范围的标记，但是当Slider设置为0-10时，只有“ 0”和“ 1”处于活动状态。（当Slider设置为0-9且仅降低“ 0”时有效）

Answer 1

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

Material-UI滑块未更改活动范围颜色

1 个答案: