¿Cómo diseñar la entrada del rango HTML5 para que tenga un color diferente antes y después del control deslizante?

Solución:

CSS puro solución:

• Cromo: Ocultar el desbordamiento de input[range]y rellene todo el espacio que queda para pulgar con el color de la sombra.
• ES DECIR: No hay necesidad de reinventar la rueda: ::-ms-fill-lower
• Firefox No hay necesidad de 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;
}

<input type="range"/>

Si bien la respuesta aceptada es buena en teoría, ignora el hecho de que el pulgar no puede ser más grande que el tamaño de la pista sin ser cortado por el overflow: hidden. Vea este ejemplo de cómo manejar esto con solo un poquito de JS.

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>

Sí, es posible. Aunque no lo recomendaría porque input range No es realmente compatible con todos los navegadores porque es un elemento nuevo agregado en HTML5 y HTML5 es solo un borrador (y lo será por mucho tiempo), por lo que ir tan lejos como para diseñarlo quizás no sea la mejor opción.

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

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

---

---

Utiliza Nuestro Buscador