Thuộc tính giá trị phạm vi đầu vào HTML DOM được liên kết với phần tử đầu vào có kiểu =”phạm vi” và thuộc tính giá trị. Nó được sử dụng để trả về giá trị của thuộc tính giá trị điều khiển thanh trượt hoặc để đặt nó. Thuộc tính giá trị 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
Sau đây là cú pháp cho -
Đặt thuộc tính giá trị -
rangeObject.value = text;
Ở đây, văn bản được sử dụng để chỉ định giá trị cho điều khiển thanh trượt phạm vi.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính giá trị phạm vi đầu vào -
<!DOCTYPE html>
<html>
<body>
<h1>Input range Value property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
function getValue() {
var t = document.getElementById("RANGE1").value;
document.getElementById("Sample").innerHTML = "The value for the radio button is : "+t;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút “Nhận giá trị” -
Trong ví dụ trên -
Chúng tôi đã tạo một trường đầu vào chứa bên trong một biểu mẫu có type =“range”, id =“RANGE1”, name =“VOL” -
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
Sau đó, chúng tôi đã tạo một nút “Nhận giá trị” sẽ thực thi phương thức getValue () khi người dùng nhấp vào -
<button type="button" onclick="getValue()">Get Value</button>
Phương thức getValue () nhận phần tử đầu vào bằng phương thức getElementById () và gán giá trị thuộc tính “value” của nó cho biến t. Sau đó, biến này được hiển thị trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -
function getValue() {
var t = document.getElementById(“RANGE1").value;
document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}