Phương thức stepDown() của Input Range trong HTML DOM

Phương thức stepDown() của HTML DOM Input Range được sử dụng để giảm giá trị thanh trượt xuống một số lượng xác định. Nếu để trống thì sẽ giảm 1. Nếu thuộc tính step được chỉ định thì stepDown() sẽ giảm theo bội số của step. Ví dụ: Nếu step="20" thì stepDown(2) sẽ giảm 20*2=40.

Cú pháp

Cú pháp cho phương thức stepDown() của Range:

rangeObject.stepDown(number)

Ở đây, number là tham số bắt buộc chỉ định giá trị giảm của thanh trượt. Nếu để trống sẽ giảm 1.

Ví dụ

Ví dụ minh họa cho phương thức stepDown() của Range:

<!DOCTYPE html> <html> <body> 
<h1>Phương thức stepDown() của Input Range</h1> 
<form> 
ÂM LƯỢNG <input type="range" id="RANGE1" name="VOL"> 
</form> 
<p>Giảm giá trị thanh trượt bằng cách nhấn nút dưới đây</p> 
<button type="button" onclick="stepDecrement()">GIẢM</button> 
<p id="Sample"></p> 
<script> 
    function stepDecrement() { 
        document.getElementById("RANGE1").stepDown(10); 
    } 
</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 GIẢM:

Trong ví dụ trên:

Chúng ta tạo trường input trong form với type="range", id="RANGE1", name="VOL":

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

Tạo nút GIẢM thực thi phương thức stepDecrement() khi được nhấn:

<button type="button" onclick="stepDecrement()">GIẢM</button>

Phương thức stepDecrement() dùng getElementById() lấy trường range với id="RANGE1" và gọi stepDown() với giá trị giảm 10. Điều này sẽ giảm thanh trượt xuống 10 đơn vị:

function stepDecrement() { 
    document.getElementById("RANGE1").stepDown(10); 
}