Intervalo de tipo de entrada de estilo no IE

O intervalo do tipo de entrada é compatível com IE10 e superior [1]. Para o IE9 e o resto, a entrada de intervalo será padronizada para um texto do tipo de entrada.

O intervalo de tipo de entrada padrão no IE

O que pretendemos alcançar

A primeira coisa que queremos mudar é o elemento da trilha . Esta é a área em que o polegar (ou manipulador da entrada) desliza. O truque é definir a cor e o plano de fundo dessa área para a mesma cor, dessa forma você também se livra das linhas verticais da régua.

input[type=range]::-ms-track // to target it

input[type=range]::-ms-track {
  background: #ddd;
  color: #ddd;
}

Aviso importante: não agrupe pseudo seletores com prefixos de navegador. Portanto, coisas como :: – ms-track & :: – webkit-slider-thumb devem ser separadas, mesmo que compartilhem as mesmas regras CSS, porque os navegadores invalidarão o pseudo seletor que não reconhecem e, por sua vez, invalidarão todo o bloco CSS.

Em seguida, queremos estilizar o thumb (o manipulador da entrada)

input[type=range]::-ms-thumb // to target it

A única desvantagem que descobri com esse elemento é que o manipulador está dentro do elemento track e não pode estourá-lo. Isso significa que o polegar é sempre tão grande quanto o elemento da trilha permite.

Você também pode direcionar para o estado ativo . Isso destacaria seu manipulador conforme você o arrasta

input[type=range]:active::-ms-thumb // to target it

Para um exemplo completo de trabalho http://codepen.io/piatra/full/sDipn
A demonstração também inclui CSS para Chrome e Firefox.

Feliz hackeamento!

[1] http://caniuse.com/#feat=input-range