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

Question

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.

Imbalance

Answer 1

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

Harlen

Answer 2

Just want to add onto the accepted answer as UI has changed substantially since the original question was asked and to add a visual aspect:

Twocolor

Um, for the first picture, why not just click the Gear icon instead? It takes you directly to Preferences. – Borgerhout

@Borgerhout not sure if that was available at the time. But that seems like a quicker way to get to preferences. – Twocolor

It's the Gear icon ⚙️ peeking from under the first (upper) pink arrowhead in the screenshot #1. So it was definitely available at the time :) – Borgerhout