Đối tượng HTML DOM Input Range liên kết với phần tử <input> có type="range". Chúng ta có thể tạo và truy cập phần tử range bằng phương thức createElement() và getElementById() tương ứng.
Các thuộc tính
Dưới đây là các thuộc tính của đối tượng Input Range:
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | autocomplete Thiết lập hoặc trả về giá trị thuộc tính autocomplete của điều khiển range |
| 2 | autofocus Thiết lập hoặc trả về xem thanh trượt có tự động lấy focus khi tải trang hay không |
| 3 | defaultValue Thiết lập hoặc trả về giá trị mặc định của thanh trượt |
| 4 | disabled Thiết lập hoặc trả về xem thanh trượt có bị vô hiệu hóa hay không |
| 5 | form Trả về tham chiếu form chứa thanh trượt |
| 6 | list Trả về tham chiếu đến datalist chứa thanh trượt |
| 7 | max Thiết lập hoặc trả về giá trị thuộc tính max của thanh trượt |
| 8 | min Thiết lập hoặc trả về giá trị thuộc tính min của thanh trượt |
| 9 | name Thiết lập hoặc trả về giá trị thuộc tính name của thanh trượt |
| 10 | step Thiết lập hoặc trả về giá trị thuộc tính step của thanh trượt |
| 11 | type Trả về loại phần tử form của thanh trượt |
| 12 | value Thiết lập hoặc trả về giá trị thuộc tính value của thanh trượt |
Phương thức
Các phương thức của đối tượng Input Range:
| STT | Phương thức & Mô tả |
|---|---|
| 1 | stepDown() Giảm giá trị thanh trượt một số lượng cho trước |
| 2 | stepUp() Tăng giá trị thanh trượt một số lượng cho trước |
Ví dụ
Ví dụ minh họa cho đối tượng Input Range:
<!DOCTYPE html> <html> <head> <script>
function rangeCreate() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}
</script> </head> <body>
<h1>Đối tượng Input Range</h1>
<p>Tạo trường nhập loại range bằng cách nhấn nút dưới đây</p>
<button onclick="rangeCreate()">TẠO</button>
<br><br> ÂM LƯỢNG: </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ẠO:
Trong ví dụ trên:
Chúng ta tạo nút TẠO thực thi phương thức rangeCreate() khi được nhấn:
<button onclick="rangeCreate()">TẠO</button>
Phương thức rangeCreate() dùng createElement() của document để tạo phần tử <input> với tham số "INPUT". Phần tử mới gán cho biến R và dùng setAttribute() tạo thuộc tính type="range". Cuối cùng dùng appendChild() trên document body để thêm phần tử range làm con của body:
function rangeCreate() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}