Атрибут step тега <input> — крок зміни числа

HTML

<form>
  <p><b>З використанням атрибута "step"</b></p>
  <p>Поточне значення повзунка</p>
  <p><input type="number" id="text"></p>
  <p> 
  <input type="range" min="0" max="100" step="5" value="0" id="range" onmousemove="f()">   
</p>
  <input type="reset" onclick ="f()">
</form>
<br><br>
<form>
  <p><b>Без використання атрибута "step"</b></p>
  <p>Поточне значення повзунка</p>
  <input type="text" id="i1"><br><br>
<input type="range" id="r1" min="0" max="100" value="0"oninput="fun1()"><br><br>
  <input type="reset" onclick ="f()">
  </form>

JS

text.innerHTML = "";
function f() {
  var range = document.getElementById("range").value;

  text.value = range;
}

function fun1() {
  var rng = document.getElementById('r1');
  var i1 = document.getElementById('i1');
  i1.value = rng.value;
}
//# sourceURL=pen.js

HTML

<form>
    <p class="row">
        <label for="a">step="1" value="2.5", БЕЗ min</label>
        <input id="a" type="number" step="1" value="2.5">
        <span class="verdict"></span>
        <em>точкою відліку стало саме 2,5 — число в сітці</em>
    </p>

    <p class="row">
        <label for="b">той самий крок, але з min="0"</label>
        <input id="b" type="number" step="1" min="0" value="2.5">
        <span class="verdict"></span>
        <em>відлік від нуля — 2,5 у сітку вже не влучає</em>
    </p>

    <p class="row">
        <label for="c">min="1" step="2", значення 4</label>
        <input id="c" type="number" min="1" step="2" value="4">
        <span class="verdict"></span>
        <em>дозволені 1, 3, 5 — стрілочки ходять саме по них</em>
    </p>

    <p class="row">
        <label for="d">ціна: step="0.01", значення 19.995</label>
        <input id="d" type="number" min="0" step="0.01" value="19.995">
        <span class="verdict"></span>
        <em>сотих замало на три знаки після коми</em>
    </p>

    <p class="row">
        <label for="e">step="any" — перевірки немає</label>
        <input id="e" type="number" min="0" step="any" value="2.5">
        <span class="verdict"></span>
        <em>будь-яке число вважається правильним</em>
    </p>

    <p class="row">
        <label for="f">повзунок: min="0" max="10" step="2" value="5"</label>
        <input id="f" type="range" min="0" max="10" step="2" value="5">
        <span class="verdict"></span>
        <em>повзунок не буває помилковим: 5 підтягнулося до 6, і стає він
            лише на парні позначки</em>
    </p>
</form>

CSS

.row {
    margin: 0 0 18px;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

input {
    padding: 5px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

input:invalid {
    border-color: #d64545;
    background: #fff4f4;
}

input:valid {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

input[type="range"] {
    padding: 0;
    background: none;
    vertical-align: middle;
}

.verdict {
    margin-left: 10px;
    font-weight: 600;
}

input:valid ~ .verdict::before {
    content: "правильне";
    color: #3a9a4f;
}

input:invalid ~ .verdict::before {
    content: "помилкове — форму не надіслати";
    color: #d64545;
}

em {
    display: block;
    margin-top: 4px;
    max-width: 460px;
    color: #5a6472;
    font-size: .9em;
    font-style: normal;
}