¿Hay alguna manera de diseñar el control de rango de HTML5?

¿Hay alguna manera de diseñar el control de rango de HTML5? ¿Es posible cambiar el color de la línea en la que se desliza el control deslizante?

Resulta que hay un juego web:

input[type="range"]{ -webkit-appearance:none !important; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none !important; } 

A continuación, puede agregar los atributos que necesite a cada uno de esos selectores. Fondo, gradiente, etc.

¡Espero que ayude!

Un ejemplo completo de css para personalizar (en este momento para webkit):

 input[type="range"]{ background: rgb(94, 30, 30); width: 130px; height: 6px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); } input[type="range"]:hover{ background: rgb(194, 139, 131); width: 130px; height: 6px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none !important; width:25px; height:15px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border:1px solid black; background: #a90329; background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019)); background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); } input[type="range"]::-webkit-slider-thumb:hover{ -webkit-appearance:none !important; width:25px; height:15px; -webkit-appearance: none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-color:rgb(56, 13, 13); border:1px solid black; background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254)); background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 ); } 

En la parte superior, la respuesta ya está descrita. Solo lo personalizo en mi camino. Echa un vistazo, puede ayudarte.

Agregue el código siguiente en CSS:

 input:focus{ outline-color: transparent; } input[type="range"]{ -webkit-appearance:none; -moz-apperance:none; height: 6px; background-color: #b6b6b6; outline-color: transparent; } input::-webkit-slider-thumb{ -webkit-appearance:none; -moz-apperance:none; width:16px; height:16px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; background-color: #20b373; overflow: visible; } 

Demo en vivo