¿Cómo estilo de entrada de rango HTML5 para tener un color diferente antes y después del control deslizante?

enter image description here

Quiero que el lado izquierdo sea verde y que el lado derecho sea gris. Como se muestra arriba sería PERFECTO. Preferiblemente, una solución pura de CSS (solo debe preocuparse por WebKit).

¿Es posible tal cosa?

Sí, es posible. Aunque no lo recomendaría porque input range no es soportado correctamente por todos los navegadores porque es un nuevo elemento agregado en HTML5 y HTML5 es solo un borrador (y será por mucho tiempo), así que llegar tan lejos como para diseñarlo quizás no sea La mejor decision.

Además, necesitarás un poco de JavaScript también. Me tomé la libertad de usar la biblioteca jQuery para esto, por motivos de simplicidad.

Aquí tienes: http://jsfiddle.net/JnrvG/1/ .

Solución Pure CSS :

  • Chrome: Oculta el desbordamiento de la input[range] , y llena todo el espacio que queda para pulgar con el color de la sombra.
  • IE: no es necesario reinventar la rueda: ::-ms-fill-lower
  • Firefox no necesita reinventar la rueda: ::-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; } 
  

La solución aceptada anterior ya no funciona .

Terminé codificando una función simple que envuelve el range en un contenedor con estilo añadiendo la barra que se necesita antes del cursor. Escribí este ejemplo donde es fácil ver los dos colores ‘azul’ y ‘naranja’ establecidos en el CSS, por lo que se pueden modificar rápidamente.

Una pequeña actualización de este:

si usa lo siguiente, se actualizará sobre la marcha en lugar de hacerlo con el lanzamiento del mouse.

“cambiar mousemove”, función ”

  

Ahora es compatible con pseudoelementos en cada uno de WebKit, Firefox e IE. Pero, por supuesto, es diferente en cada uno. : (

Vea las respuestas de esta pregunta y / o busque un CodePen titulado prettify prettify #101 para algunas soluciones.

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

el código anterior cambia el estilo de entrada de rango …..