cytsunny cytsunny - 1 month ago 10
CSS Question

How to see the style of the thumb of range input in Chrome developer tools?

I am using materialize css for my website and currently I am trying to change the style of the thumb of the range input (i.e. The thing you click and hold to change the value of the slide bar)

And when changing sytle, I would like to change value on Chrome developer tools first to see how it looks before making the change in my CSS. However, I can only find the style for the range input in developer tools but not the style for the thumb. Is there a way I can see the style of the thumb in Chrome developer tools?




P.S. Mainly the HTML5 range input. The noUISlider is created by Javascript and it is visible on developer tools. Sorry that there is no id for the HTML5 range input so I can only link to to header nearest to it.

Answer

You can enable View Shadow DOM in DevTools console and view styles associated with Shadow DOM elements.

Hit

F12 > F1 to open DevTools >> Settings >> Preferences

You will find the option under Elements as Show user agent shadow DOM


Shadow DOM DevTools