How to create a range button with pure javascript

Asked

Viewed 289 times

0

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

javascript
  • 1

    Greetings. Can you post next to the question the code you have already made? Just below the question there is the [Edit] button. To enter the code, simply copy it into the body of the question, select it and press Ctrl+K to format it properly.

1 answer

3


How pure Javascript has no way, will always depend HTML and CSS, in this case an example generated with http://danielstern.ca/range.css/ would be this (in this case just use the 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

  1. There is repetition of CSS due to "rules" (css Rules) becoming invalid when an invalid selector exists within a rule (a rule can have multiple selectors divided by comma or within :not() for example):

  2. Safari and Chrome do not support a property equivalent to -moz-range-progress so there’s no way to make one color left and one color right, maybe in the future I’ll update the answer.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.