Composant MUI Slider : pouces de différentes couleurs

Question

MUI a un composant slider : https://mui.com/material-ui/react-slider/

J'utilise actuellement cela pour permettre à l'utilisateur de sélectionner une plage de valeurs (mon curseur a donc deux pouces) Documentation du curseur multi-pouces MUI : https://codesandbox.io/s/gptppq?file=/demo.js

Le curseur peut être stylé comme ceci : https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

Ma question : Comment puis-je faire en sorte que les deux pouces aient des styles/couleurs différents ?

Answer 1

Vous pouvez cibler l'accessoire data-index via le Sélecteur d'attribut CSS Par exemple :

.

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

Produit par :

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