Cách dùng nhiều step attribute khác nhau trong một input range trong HTML

Thuộc tính step của input HTML thiết lập các khoảng số hợp lệ. Các step là các bước số như 0, 2, 4, 6, 8, 10, v.v. Thuộc tính step có thể dùng cùng với max và min để tạo dải giá trị hợp lệ.

Để dùng nhiều step attribute khác nhau trong một input range, ta dùng JavaScript. Trước hết, xem cách dùng step attribute.

Ví dụ step đơn giản

Tạo step 2, giá trị hợp lệ: 2, 4, 6, 8, 10... Nếu nhập số khác và nhấn submit, sẽ báo "Please enter a valid value" và cho biết 2 giá trị gần nhất.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML input step attribute</title>
  </head>
  <body>
    <form action="/cgi-bin/hello_get.cgi" method="get">
      <input type="number" name="points" step="2"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Ví dụ nhiều step trong một range (dùng jQuery)

Dùng jQuery để cung cấp nhiều step attribute trong một range input. Ở đây có 2 step: 10 và 2. Range từ 100 đến 450, đặt ở min và max.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#points').on('input change', function() {
          var element = $('#points'),
              value = element.val(),
              step;
          // Thiết lập quy tắc
          if (value < 205) {
            step = 10;
          } else {
            step = 2;
          }
          element.attr('step', step);
          $('#value').text(value);
          $('#step').text(step);
        });
      });
    </script>
  </head>
  <body>
    <div>Giá trị: <span id="value"></span></div>
    <div>Step hiện tại: <span id="step"></span></div>
    <div><input id="points" type="range" value="100" min="100" max="450" /></div>
  </body>
</html>