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

Thuộc tính max của HTML DOM Input Range được sử dụng để thiết lập hoặc trả về giá trị thuộc tính max cho điều khiển thanh trượt (range slider). Thuộc tính này chỉ định giá trị tối đa của thanh trượt và thường dùng cùng thuộc tính min để tạo khoảng giá trị mà thanh trượt có thể di chuyển.

Cú pháp

Cú pháp để thiết lập thuộc tính max của Range:

rangeObject.max = number

Ở đây, number đại diện cho giá trị tối đa của thanh trượt.

Ví dụ

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

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính max của Range</h1> 
<form> 
ÂM LƯỢNG <input type="range" id="RANGE1" name="VOL" max="75"> 
</form> 
<p>Lấy giá trị tối đa cho thanh trượt trên bằng cách nhấn nút dưới đây.</p> 
<button type="button" onclick="maxVal()">LẤY MAX</button> 
<p id="Sample"> </p> 
<script> 
    function maxVal() { 
        var R= document.getElementById("RANGE1").max; 
        document.getElementById("Sample").innerHTML = "Giá trị tối đa cho thanh trượt này là: "+R; 
    } 
</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 LẤY MAX:

Trong ví dụ trên:

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

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

Tạo nút LẤY MAX thực thi phương thức maxVal() khi được nhấn:

<button type="button" onclick="maxVal()">LẤY MAX</button>

Phương thức maxVal() dùng getElementById() để lấy trường input type range và giá trị thuộc tính max. Giá trị trả về (giá trị tối đa thanh trượt) gán cho biến R và hiển thị trong đoạn văn id="Sample":

function maxVal() { 
    var R= document.getElementById("RANGE1").max; 
    document.getElementById("Sample").innerHTML = "Giá trị tối đa cho thanh trượt này là: "+R; 
}