While I saw a couple questions related to the slider, I’m trying to change the default and hover states for the circle portion of the slider question. I’ve inspected with dev tools and while I’ve been able to figure out where the hover state is triggered, I can’t actually see any styles changing in the CSS to be able to change them.My goal is to have the circle be a specific green by default, not this beige color by default, like shown in the middle slider (I have it’s hover state toggled on). And I don’t want it to have a hover color of that green mixed with black which the top slider shows. So I’m not sure if anyone can help me figure out how to actually target the styles for that slider circle. I’ve gone as specific as I can figure out in the inspect dev tools and the hover state is actually a higher level div which to me makes no sense. But again, I still don’t see any styles defined for it’s different hover states either so that I can change them.

Hi,/* WebKit (Chrome, Safari, Edge) */.slider.handle .slider-range-container input[type="range"]::-webkit-slider-thumb { background: green !important; border-color: green !important;}/* Firefox */.slider.handle .slider-range-container input[type="range"]::-moz-range-thumb { background: green !important; border-color: green !important;}

Targeting slider progress circle for custom CSS

Targeting slider progress circle for custom CSS | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded