Como crio uma seekbar com javascript puro? Um exemplo abaixo:
PS: Eu não sei utilizar o jQuery, por isso gostaria do codigo em javascript puro
1 Resposta
Como JavaScript puro não tem como, sempre dependerá de HTML e CSS, no caso um exemplo gerado com http://danielstern.ca/range.css/ seria isto (neste caso bastou usar o input[type=range]
e CSS
):
input[type=range] {
min-width: 100px; /* pode ajustar a largura aqui */
margin: 9px 0;
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
background-color: #0071a9;
border-radius: 25px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0),
0 0 0 rgba(13, 13, 13, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33),
0 0 1px rgba(13, 13, 13, 0.33);
height: 28px;
width: 28px;
border-radius: 28px;
background-color: #fff;
cursor: pointer;
margin-top: -9px;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #008cd2;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
background: #0071a9;
border-radius: 25px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0),
0 0 0 rgba(13, 13, 13, 0);
}
input[type=range]::-moz-range-thumb {
height: 28px;
width: 28px;
border-radius: 28px;
background-color: #fff;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33),
0 0 1px rgba(13, 13, 13, 0.33);
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #005680;
border: 0 solid #010101;
border-radius: 50px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0),
0 0 0 rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #0071a9;
border-radius: 50px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0),
0 0 0 rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
height: 28px;
width: 28px;
border-radius: 28px;
background-color: #fff;
cursor: pointer;
height: 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33),
0 0 1px rgba(13, 13, 13, 0.33);
}
input[type=range]:focus::-ms-fill-lower {
background-color: #0071a9;
}
input[type=range]:focus::-ms-fill-upper {
background-color: #008cd2;
}
<input type="range"> <input type="range"> <input type="range">
Notas importantes
Existe repetição de CSS devido a "regras" (css rules) se tornarem inválidos quando existir um seletor inválido dentro uma regra (uma regra pode ter múltiplos seletores divididos por virgula ou dentro de
:not()
por exemplo):O Safari e Chrome não tem suporte a uma propriedade equivalente ao
-moz-range-progress
por isto não tem como fazer uma cor a esquerda e outra a direita, talvez no futuro eu atualize a resposta.
Ctrl+K
para formatá-lo corretamente.