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

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

Cú pháp

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

rangeObject.stepUp(number)

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

Ví dụ

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

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

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 TĂNG thực thi phương thức stepIncrement() khi được nhấn:

<button type="button" onclick="stepIncrement()">TĂNG</button>

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

function stepIncrement() { 
    document.getElementById("RANGE1").stepUp(10); 
}