MUI has a slider component: https://mui.com/material-ui/react-slider/
I'm currently using this to allow the user to select a range of values (so my slider has two thumbs) MUI multi-thumb slider documentation: https://codesandbox.io/s/gptppq?file=/demo.js
The slider thumb can be styled as follows: https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812
My question: How do I make the two thumbs have different styles/colors?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can target the
data-indexprop through the CSS attribute selector. For example:<Slider value={value} onChange={handleChange} sx={{ "& .MuiSlider-thumb": { "&[data-index='0']": { backgroundColor: "pink" }, "&[data-index='1']": { backgroundColor: "yellow" } } }} />produce:
Working CodeSandbox: https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9