CSS How to style a Range input


Example

HTML

<input type="range"></input>

CSS

EffectPseudo Selector
Thumbinput[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, input[type=range]::-ms-thumb
Trackinput[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=range]::-ms-track
OnFocusinput[type=range]:focus
Lower part of the trackinput[type=range]::-moz-range-progress, input[type=range]::-ms-fill-lower (not possible in WebKit browsers currently - JS needed)