I've been attempting to conceal the slide thumb, initially without using a library. However, I started considering utilizing material-ui as it might make the process easier. Hence, I'm seeking assistance here.
Below is my code snippet:
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}
/>
);
}
Styling:
.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;
}
Outcome:
https://i.sstatic.net/kCDOK.png
When focused:
https://i.sstatic.net/7o4F7.png
I succeeded in hiding the main thumb but unable to remove the "secondary thumb," commonly known as the light blue one that appears upon clicking the thumb. How can I eliminate it?
I aim for a consistent style, even when the user drags the thumb: https://i.sstatic.net/kCDOK.png