Komponen Slider MUI: Ibu Jari Berwarna Berbeza

Question

MUI mempunyai komponen gelangsar: https://mui.com/material-ui/react-slider/

Saya sedang menggunakan ini untuk membenarkan pengguna memilih julat nilai (jadi peluncur saya mempunyai dua ibu jari) Dokumentasi peluncur berbilang ibu jari MUI: https://codesandbox.io/s/gptppq?file=/demo.js

Ibu jari peluncur boleh digayakan seperti ini: https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

Soalan saya: Bagaimanakah saya boleh menjadikan dua ibu jari mempunyai gaya/warna yang berbeza?

Answer 1

Anda boleh menyasarkan data-index prop melalui pemilih atribut CSS Contohnya:

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

Dihasilkan oleh:

KodKod Kerja: https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9