MUI has a slider component: https://mui.com/material-ui/react-slider/
I'm currently using it to allow users to pick a value range (so my slider has two thumbs)
MUI multi thumb slider docs: https://codesandbox.io/s/gptppq?file=/demo.js
滑块拇指的样式如下所示:https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812
我的问题是:如何让这两个拇指拥有不同的风格/ colored颜色 ？
您可以通过CSS attribute selectors瞄准data-indexprops 来单独设置MUI Range Slider的每个拇指的样式.例如:
<Slider
value={value}
onChange={handleChange}
sx={{
"& .MuiSlider-thumb": {
"&[data-index='0']": {
backgroundColor: "pink"
},
"&[data-index='1']": {
backgroundColor: "yellow"
}
}
}}
/>
这将产生:
101 https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9