I am currently working on a Range Slider component that ranges from zero to ten. The issue I am facing is that the values inside the range are not getting colored as expected.
Here is My Custom 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 defined in the controller:
const [voteRange, setVoteRange] = useState([0, 10]);Marks values for colors:
const marks = [
{
value: 0,
label: '0',
},
{
value: 5,
label: 5,
},
{
value: 10,
label: 10,
},
];
After going through the API docs, I have not been able to find a solution to my problem.
The expected behavior is to see all marks in the specified range with active colors, however, when the Slider is set to 0-10, only '0' and '1' appear active. Additionally, when the Slider is set to 0-9 or lower, only '0' appears active.