0

Como crio uma seekbar com javascript puro? Um exemplo abaixo:Imagem
PS: Eu não sei utilizar o jQuery, por isso gostaria do codigo em javascript puro

1
  • 1
    Saudações. Tem como você postar junto à pergunta o código que você já fez? Logo abaixo da pergunta existe o botão editar. Para inserir o código, basta copiá-lo no corpo da pergunta, selecioná-lo e pressionar Ctrl+K para formatá-lo corretamente.
    – Woss
    Commented 27/04/2017 às 23:28

1 Resposta 1

3

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

  1. 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):

  2. 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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .