<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* define el formato de la barra */
.range { position:relative;
background: linear-gradient(#0288d1, #0288d1);
background-repeat: no-repeat;
background-size:0%;
-webkit-appearance: none;
height: 5px;
background-color:#eee;
width:300px;
}
/* Se utiliza para mostrar el valor numerico */
.range::after { content:attr(data-value);
position:absolute;
right:-30px;
top:-8px;
font-size:18px;
}
/* define el formato del punto indicador */
.range::-webkit-slider-thumb { background: #0288d1;
border: 2px solid #0288d1;
-webkit-appearance: none;
border:1px solid #0288d1;
height:16px;
width:16px;
border-radius:8px;
}
div {padding:20px;} </style>
</head>
<body>
<div>
<input type="range" min="0" max="10" class="range" value="0" data-value="0">
</div>
<div>
<input type="range" min="0" max="10" class="range" value="0" data-value="0">
</div>
</body>
</html>
<script>
const range=document.querySelectorAll(".range");
range.forEach(el=>{ el.addEventListener("input", function() { this.style.backgroundSize=(this.value*10)+"% 100%";
this.dataset.value=this.value;
this.blur();
});
});
</script>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (2)