Como estilizar a input do intervalo HTML5 para ter colors diferentes antes e depois do controle deslizante?

insira a descrição da imagem aqui

Eu quero que o lado esquerdo seja verde e o lado direito fique cinza. Como na foto acima, seria PERFEITO. De preferência, uma solução CSS pura (só precisa se preocupar com o WebKit).

É possível uma coisa dessas?

Sim, é possível. Embora eu não recomendo, porque o input range não é realmente suportado por todos os navegadores, porque é um novo elemento adicionado em HTML5 e HTML5 é apenas um rascunho (e será por muito tempo), indo tão longe ao estilo que talvez não seja a melhor escolha.

Além disso, você precisará de um pouco de JavaScript também. Tomei a liberdade de usar a biblioteca jQuery para isso, para fins de simplicidade.

Aqui você vai: http://jsfiddle.net/JnrvG/1/ .

Solução CSS pura :

  • Chrome: oculta o estouro da input[range] e preencha todo o espaço deixado para o polegar com a cor da sombra.
  • IE: não há necessidade de reinventar a roda: ::-ms-fill-lower
  • Firefox não precisa reinventar a roda: ::-moz-range-progress
 /*Chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) { input[type='range'] { overflow: hidden; width: 80px; -webkit-appearance: none; background-color: #9a905d; } input[type='range']::-webkit-slider-runnable-track { height: 10px; -webkit-appearance: none; color: #13bba4; margin-top: -1px; } input[type='range']::-webkit-slider-thumb { width: 10px; -webkit-appearance: none; height: 10px; cursor: ew-resize; background: #434343; box-shadow: -80px 0 0 80px #43e5f7; } } /** FF*/ input[type="range"]::-moz-range-progress { background-color: #43e5f7; } input[type="range"]::-moz-range-track { background-color: #9a905d; } /* IE*/ input[type="range"]::-ms-fill-lower { background-color: #43e5f7; } input[type="range"]::-ms-fill-upper { background-color: #9a905d; } 
  

A solução aceita anteriormente não está mais funcionando .

Acabei de codificar uma function simples que envolve o range em um contêiner com estilo, adicionando a barra necessária antes do cursor. Eu escrevi este exemplo onde é fácil ver as duas colors ‘blue’ e ‘orange’ definidas no css, para que possam ser rapidamente modificadas.

Uma pequena atualização para esta:

Se você usar o seguinte, ele será atualizado na hora e não na liberação do mouse.

“mudar mousemove”, function ”

  

Agora é suportado com pseudo-elementos em cada um dos WebKit, Firefox e IE. Mas, claro, é diferente em cada um. : (

Veja as respostas desta pergunta e / ou procure por um CodePen intitulado prettify #101 para algumas soluções.

 input type="range" min="0" max="50" value="0" style="margin-left: 6%;width: 88%;background-color: whitesmoke;" 

código acima muda estilo de input de gama …..