Search code examples
javascriptcssreactjsmaterial-uislider

MUI Slider Component: different colour thumbs

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

The slider thumb can be styled as shown here: https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

My question: how do i make the two thumbs have a different style/color?

Solution

  • You can style each thumb of the MUI Range Slider individually by targeting the data-index prop via CSS attribute selectors. For example:

    <Slider
  value={value}
  onChange={handleChange}
  sx={{
    "& .MuiSlider-thumb": {
      "&[data-index='0']": {
        backgroundColor: "pink"
      },
      "&[data-index='1']": {
        backgroundColor: "yellow"
      }
    }
  }}
/>

    Which produces:

    example of individually styled thumbs

    Working CodeSandbox: https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9