Thuộc tính step của Input Range trong HTML DOM

Thuộc tính step của HTML DOM Input Range được sử dụng để thiết lập hoặc trả về giá trị thuộc tính step của điều khiển thanh trượt. Nó chỉ định khoảng cách thanh trượt di chuyển trên mỗi lần. Kết hợp max, min và step có thể định nghĩa khoảng giá trị hợp lệ.

Cú pháp

Cú pháp để thiết lập thuộc tính step:

rangeObject.step = number

Ở đây, number chỉ định kích thước bước di chuyển của thanh trượt. Giá trị mặc định là 1.

Ví dụ

Ví dụ minh họa cho thuộc tính step của Input Range:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính step của Input Range</h1> 
<form> 
ÂM LƯỢNG <input type="range" id="RANGE1" name="VOL"> 
</form> 
<p>Thay đổi giá trị step của thanh trượt trên bằng cách nhấn nút dưới đây</p> 
<button type="button" onclick="changeStep()">THAY ĐỔI</button> 
<p id="Sample"></p> 
<script> 
    function changeStep() { 
        document.getElementById("RANGE1").step = "30"; 
        document.getElementById("Sample").innerHTML = "Giá trị thuộc tính step hiện là 30"; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút THAY ĐỔI:

Trong ví dụ trên:

Chúng ta tạo trường input trong form với type="range", id="RANGE1", name="VOL". Giá trị step mặc định là 1:

<form> ÂM LƯỢNG <input type="range" id="RANGE1" name="VOL"> </form>

Tạo nút THAY ĐỔI thực thi phương thức changeStep() khi được nhấn:

<button type="button" onclick="changeStep()">THAY ĐỔI</button>

Phương thức changeStep() dùng getElementById() lấy trường range id="RANGE1" và thiết lập step=30. Điều này tăng khoảng di chuyển của thanh trượt. Vì min=0, max=100 mặc định nên thanh trượt chỉ di chuyển đến 3 vị trí:

function changeStep() { 
    document.getElementById("RANGE1").step = "30"; 
    document.getElementById("Sample").innerHTML = "Giá trị thuộc tính step hiện là 30"; 
}