Hide slider thumb in material-ui library

Question

I'm trying to hide the slide thumb. I tried to do it without using a library but then I think that it should be better to use material-ui because maybe it would be easier but I'm here asking help.

Here is my code:

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}
    />
  );
}

style:

.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;
}

working code here

result:

on focus

I was able to hide the main thumb but not the "secondary thumb". I don't know how to call it, the light blue one that appears clicking on the thumb. How can I remove it?

I want the following style always, even when user drag the thumb:

Answer 1

You could add style override for hover (pseudo-class) and active state (for MUI it is .Mui-active)

.MuiSlider-thumb:is(:hover, .Mui-active) {
  display: none;
}

Demo