MUI Slider Component: Different Colored Thumbs

Question

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?

Answer 1

You can target the data-index prop 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