MUI 슬라이더 구성 요소: 다양한 색상의 엄지손가락

Question

MUI에는 슬라이더 구성요소가 있습니다: https://mui.com/material-ui/react-slider/

나는 현재 이것을 사용하여 사용자가 값의 범위를 선택할 수 있도록 하고 있습니다(그래서 내 슬라이더에는 두 개의 엄지손가락이 있습니다). MUI 다중 엄지 슬라이더 문서: https://codesandbox.io/s/gptppq?file=/demo.js

슬라이더 썸은 다음과 같이 스타일을 지정할 수 있습니다: https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

내 질문: 두 엄지손가락의 스타일/색상을 다르게 하려면 어떻게 해야 하나요?

Answer 1

data-indexCSS 속성 선택기를 통해 소품을 타겟팅할 수 있습니다. 예:

으아악

제작자:

작동 코드 샌드박스: https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9