Menu
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.
524
To style the range input with CSS you'll need to apply styles to two pseudo-elements: ::-webkit-slider-thumb and ::-webkit-slider-runnable-track . Find out how you can apply custom styling and make the range input more functional and appealing. Contents of the article: CSS selectors for the range input.
Goto chrome://flags/#enable-devtools-experiments , and enable Developer Tools experiments . Select Relaunch Now at the bottom of the page. F12 to Open developer tools, go to Settings , select Experiments tab, and check Allow custom UI themes .
The ::-webkit-slider-thumb CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.
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
84
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:
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
