Thuộc tính bước Phạm vi đầu vào HTML DOM

Thuộc tính bước Phạm vi đầu vào HTML DOM được sử dụng để thiết lập hoặc trả về giá trị thuộc tính bước điều khiển thanh trượt. Nó chỉ định số lượng thanh trượt sẽ di chuyển trên mỗi chuyển động. Bằng cách sử dụng thuộc tính max và min với thuộc tính step, chúng tôi có thể xác định một loạt các giá trị pháp lý.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính bước -

rangeObject.step=number

Ở đây, số chỉ định kích thước chuyển động của điều khiển thanh trượt. Giá trị mặc định cho điều này là 1.

Ví dụ

Chúng ta hãy xem một ví dụ cho thuộc tính bước Phạm vi đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the step property value of the above range control by clicking the below button</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeStep() {
      document.getElementById("RANGE1").step ="30" ;
      document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính bước Phạm vi đầu vào HTML DOM

Khi nhấp vào nút THAY ĐỔI -

Thuộc tính bước Phạm vi đầu vào HTML DOM

Trong ví dụ trên -

Chúng tôi đã tạo một trường đầu vào chứa bên trong một biểu mẫu có type =“range”, id =“RANGE1”, name =“VOL”. Giá trị thuộc tính bước của nó theo mặc định được đặt thành 1 -

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

Sau đó, chúng tôi đã tạo một nút CHANGE sẽ thực thi phương thức changeStep () khi được người dùng nhấp vào -

<button type="button" onclick="changeStep()">CHANGE</button>

Phương thức changeStep () sử dụng phương thức getElementById () để lấy trường đầu vào với phạm vi kiểu bằng cách chuyển id “RANGE1” cho nó. Sau khi nhận được phần tử, chúng tôi đặt thuộc tính bước của nó thành 30. Điều này sẽ tăng mức độ di chuyển của thanh trượt trong một chuyển động. Vì giá trị tối thiểu là 0 và giá trị tối đa là 100 theo mặc định, nên thanh trượt sẽ chỉ di chuyển đến ba vị trí bây giờ -

function changeStep() {
   document.getElementById("RANGE1").step ="30" ;
   document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}