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

Thuộc tính value của HTML DOM Input Range liên kết với phần tử input có type="range" và thuộc tính value. Nó dùng để trả về giá trị thuộc tính value của thanh trượt hoặc thiết lập nó. Giá trị value có thể là giá trị mặc định hoặc giá trị được đặt bằng cách kéo thanh trượt.

Cú pháp

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

rangeObject.value = text;

Ở đây, text dùng để chỉ định giá trị cho điều khiển thanh trượt range.

Ví dụ

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

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

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 "LẤY GIÁ TRỊ" thực thi phương thức getValue() khi được nhấn:

<button type="button" onclick="getValue()">LẤY GIÁ TRỊ</button>

Phương thức getValue() lấy phần tử bằng getElementById() và gán giá trị thuộc tính "value" cho biến t. Hiển thị trong đoạn văn id="Sample" qua innerHTML:

function getValue() { 
    var t = document.getElementById("RANGE1").value; 
    document.getElementById("Sample").innerHTML = "Giá trị cho trường input là: "+t; 
}