Last Updated: February 25, 2016
· piatra

Styling input type range in Chrome and Firefox

This is the end product I have achieved

The range input is new-ish in Firefox so styling was a bit difficult due to lack of examples.

If you're interested in styling a range input in IE:

This link was particularly useful

Good to know

/* range handler used to drag */
::-moz-range-thumb /* Firefox */
::-webkit-slider-thumb /* Chrome */

In Chrome you can use
And get away with styling the element as you wish.
That does not work in Firefox. To target the range interval you can use


To style the active state of the element, the syntax that I found works in both browsers is

/* or hover etc. */

Also you cannot link together selectors for both Firefox and Chrome, an invalid selector invalidates the entire block of properties

/* will not work */
::-moz-range-thumb {

You have to separate them into two

/* will work */
::-webkit-slider-thumb {
::-moz-range-thumb {

Hope this helps. Maybe someone might come up with a better solution. Thanks.

4 Responses
Add your response

Thank you, this was very helpfull for me.

over 1 year ago ·

Congratulations, very clear info and easy of understand.
Very helpfull for me.

over 1 year ago ·

Very Helpful!

over 1 year ago ·

This literally made my day.

over 1 year ago ·