Quero modificar o indicador de valor de um campo <input type="range"/>
. Quero mudar formato e cor desse indicador, como apresentado nas imagens a seguir.
Este é o campo que eu quero modificar. O indicador possui esse formato de "caixa, e eu quero modificar para um formato de "bola", "círculo", etc., como nos exemplos abaixo:
HTML: <p> <input type="range" id="campo" value="25" disabled/> </p>
CSS:
input[type=range] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
width: 18em;
height: 0.5em;
position: relative;
left: 4em;
border-radius: 5px;
background-color: #3071a9;
outline: none;
}
input[type=range]::-webkit-slider-thumb{
border-radius: 50%;
}
#campo::-webkit-slider-thumb{
width: 25px;
height: 25px;
border-radius: 50%;
background: blue;
}
Desde já agradeço.