How to see thumb style range input in Chrome Developer Tools?

Question

I use materialize css for my site, and I'm currently trying to change the thumb style of the input range (i.e. thing click and hold to change the value of the slider)

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

---

PS Basically the input range is HTML5. NoUISlider is created by Javascript, and this can be seen on the developer tools. Sorry there is no identifier for entering the HTML5 range, so I can only refer to the title closest to it.

Answer 1

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

Hit

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

In the Elements section you will find the Show shadow of DOM user option