Wie kann ich die Farben von Daumen und Markierungen in einem dynamischen Material-UI-Schieberegler in React anpassen? ⇐ CSS

[Guest]

Ich verwende die Slider-Komponente von Material UI (MUI) in einem React-Projekt mit TypeScript. Ich muss die Farben sowohl der Daumen als auch der Markierungen basierend auf ihrer Position auf dem Schieberegler anpassen.
Der Schieberegler hat 4 Daumen und 4 Markierungen:

• Die Daumen und Markierungen sollten die folgenden Farben haben:

• 0 und minValue: Farbe # 6baa00.
• maxValue: Farbe #ffcc00.
• 100: Farbe #ff0000.

Zusätzlich, Auf die Schiene des Schiebereglers wird ein dynamischer Farbverlauf angewendet.
Wenn ich jedoch versuche, diese Stile zu implementieren:

• Die Daumen erscheinen transparent.
• Die Markierungen behalten manchmal nicht das gewünschte Ergebnis Farben.

Unten ist meine aktuelle Implementierung:

Code: Select all

const DynamicSlider = styled(Slider)(({ railGradient }) => ({
color: 'transparent', // Hide the default main line
height: 8,
'& .MuiSlider-track': {
display: 'none', // Hide the default tracks
},
'& .MuiSlider-rail': {
background: railGradient, // Dynamic gradient
opacity: 1,
height: 8,
},
'& .MuiSlider-thumb': {
width: 16,
height: 16,
border: '2px solid #fff',
'&:nth-of-type(1)': {
backgroundColor: '#6baa00', // Color for the 0 thumb
},
'&:nth-of-type(2)': {
backgroundColor: '#6baa00', // Color for the minValue thumb
},
'&:nth-of-type(3)': {
backgroundColor: '#ffcc00', // Color for the maxValue thumb
},
'&:nth-of-type(4)': {
backgroundColor: '#ff0000', // Color for the 100 thumb
},
'&:focus, &:hover, &.Mui-active': {
boxShadow: '0 0 0 8px rgba(0, 0, 0, 0.16)',
},
},
'& .MuiSlider-mark': {
backgroundColor: 'transparent',
width: '8px',
height: '8px',
},
"& .MuiSlider-mark[data-index='0']": {
backgroundColor: '#6baa00',
},
"& .MuiSlider-mark[data-index='1']": {
backgroundColor: '#6baa00',
},
"& .MuiSlider-mark[data-index='2']": {
backgroundColor: '#ffcc00',
},
"& .MuiSlider-mark[data-index='3']": {
backgroundColor: '#ff0000',
},
}));

Problem:

• Die Daumen erscheinen transparent, obwohl bestimmte Farben mit nth-of-type zugewiesen werden.< /li>
  Die Markierungen behalten nicht immer die richtigen Farben bei.

Problembild
Wie kann ich bestimmte Farben sowohl für die Daumen als auch für die Markierungen dynamisch und konsistent festlegen, um den Designanforderungen gerecht zu werden?
Für Hinweise oder Implementierungsbeispiele zur Lösung dieses Problems wären wir sehr dankbar. Vielen Dank im Voraus!