How to create a range button with pure javascript

Navigation
0

How do I create a seekbar with pure javascript? An example below: PS: I do not know how to use jQuery, so I would like the code in pure javascript

    
asked by anonymous 28.04.2017 / 01:22

1 answer

3

As pure JavaScript does not have, always depend on HTML and CSS, in this case an example generated with link would be this (in this case just use input[type=range] and 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">

Important notes

  • CSS repeats because css rules become invalid when there is an invalid selector within a rule (a rule can have multiple selectors divided by commas or within :not() for example):

    • Safari and Chrome do not support a property equivalent to -moz-range-progress so I can not make one color left and one right, maybe in the future I'll update the answer.

    28.04.2017 / 01:29
    Div size and position How to print all the vowels present in string?