Styling input type range in Chrome and Firefox

This is the end product I have achieved http://codepen.io/Topcoat/pen/BskEn

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: https://coderwall.com/p/t4kftq

This link was particularly useful https://developer.mozilla.org/en-US/docs/User:Jonathan_Watt/range

Good to know

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

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

::-moz-range-track

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

/* or hover etc. */
input[type=range]:active::-moz-range-thumb
input[type=range]:active::-webkit-slider-thumb

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

/* will not work */
::-webkit-slider-thumb,
::-moz-range-thumb {
  background:orange;
}

You have to separate them into two

/* will work */
::-webkit-slider-thumb {
  background:orange;
}
::-moz-range-thumb {
  background:orange;
}

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