Intervalo de tipo de entrada de estilo no Chrome e Firefox

Este é o produto final que obtive http://codepen.io/Topcoat/pen/BskEn

A entrada de intervalo é nova no Firefox, então o estilo foi um pouco difícil devido à falta de exemplos.

Se você estiver interessado em estilizar uma entrada de intervalo no IE: https://coderwall.com/p/t4kftq

Este link foi particularmente útil https://developer.mozilla.org/en-US/docs/User:Jonathan_Watt/range

Bom saber

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

No Chrome, você pode usar
-webkit-apperance: none;
E comece a estilizar o elemento como desejar.
Isso não funciona no Firefox. Para definir o intervalo de intervalo, você pode usar

::-moz-range-track

Para definir o estilo do estado ativo do elemento, a sintaxe que descobri que funciona em ambos os navegadores é

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

Além disso, você não pode vincular seletores para Firefox e Chrome, um seletor inválido invalida todo o bloco de propriedades

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

Você tem que separá-los em dois

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

Espero que isto ajude. Talvez alguém encontre uma solução melhor. Obrigado.