Estoy tratando de ocultar el pulgar deslizante. Traté de hacerlo sin usar una biblioteca, pero creo que debería ser mejor usar material-ui porque tal vez sería más fácil, pero estoy aquí para pedir ayuda.

Aquí está mi código:

 import * as React from "react"; import Slider from "@mui/material/Slider"; import "./style.css"; export default function ContinuousSlider() { const [value, setValue] = React.useState(30); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <Slider aria-label="Volume" value={value} onChange={handleChange} focusVisible={false} /> ); }

estilo:

 .MuiSlider-thumb { background-color: orange; box-shadow: none; width: 0px; height: 0px; } .MuiSlider-rail { background-color: orange; border: none; } .MuiSlider-track { background-color: red; border: none; } .MuiSlider-rail { background-color: green; }

código de trabajo aquí

resultado:

enfocado

Pude ocultar el pulgar principal pero no el "pulgar secundario". No sé cómo llamarlo, el azul claro que aparece haciendo clic en el pulgar. ¿Como puedo quitarlo?

Siempre quiero el siguiente estilo, incluso cuando el usuario arrastra el pulgar: