How to change color of Slider hover and active "shadow"

Question

I'm using Material-UI and Styled-Components. And I'm struggling with changing the color of the slider. I've been able to change the color of the thumb and track. But when hovering over and clicking the thumb, a blue haze surrounds the thumb. How do I change the color of this?

I've been able to style other parts (track, ticks, thumb etc) using the classes mentioned in the API (https://material-ui.com/api/slider/#css). But not this shadow effect.

https://codesandbox.io/s/ecstatic-satoshi-3mzrj?file=/src/App.js

Answer 1

The shadow effect is also a part of thumb.

You can simply use something like

& .MuiSlider-thumb:hover {
      color: red;
      box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.3) !important;
    }

or if you don't want to use !important, try to manipulate it with this class:

.MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover {
       // your code here
}