Hướng dẫn cách lấy giá trị slider bằng JavaScript. slider hay còn gọi là thanh trượt trong phạm vi, được tạo bởi thẻ input trong HTML, và bạn sẽ biết cách lấy và đặt giá trị slider bằng JavaScript sau bài học này.
Tạo thanh trượt slider trong HTML
Để tạo thanh trượt slider trong HTML, chúng ta sử dụng tới thẻ input có thuộc tính range như sau:
<input type="range"> |
Mặc định thì thanh trượt slider được tạo sẽ có giá trị nhỏ nhất bằng 0, lớn nhất bằng 100, và độ rộng di chuyển bằng 1. Tuy nhiên chúng ta cũng có thể thay đổi các thiết lập này bằng các thuộc tính tương ứng như min, max và step như sau:
<input type="range" min="0" max="500" step="10"> |
Chúng ta có thể thiết lâp giá trị ban đầu cho thanh trượt với thuộc tính value như sau:
<input type="range" value="70"> |
Chúng ta cũng có thể sử dụng kèm thẻ label để hiển thị dòng ký tự phía sau thanh trượt slider như sau:
<label><input type="range">Âm lượng</label> |
Lấy giá trị slider bằng JavaScript
Để lấy giá trị thanh trượt slider bằng JavaScript, chúng ta sử dụng tới thuộc tính value của HTMLInputElement Object, là đối tượng đại diên cho input Element với cú pháp sau đây:
element.value
Trong đó element
là Element chỉ đến slider được lấy từ trong DOM thông qua một số phương thức, ví dụ như getelementbyid chẳng hạn.
Ví dụ, để lấy giá trị slider có id = myslider
, chúng ta viết như sau:
let element = document.getElementById('myslider'); |
Ngoài ra, chúng ta cũng có thể gán giá trị cho thẻ thanh trượt slider trong Javascript sau khi lấy Element chỉ đến slider đó như sau:
let element = document.getElementById('myslider'); |
Sau đây hãy cùng xem demo lấy giá trị slider JavaScript với mã HTML dưới đây:
|
Với mã lệnh này, chúng ta đã tạo ra một slider biểu diễn tinh chỉnh âm lượng, và một nút check để lấy giá trị âm lượng hiện tại.
Bạn có thể di chuyển thanh trượt, và click vào nút check để lấy giá trị hiện tại của thanh trượt slider như sau:
Bắt sự kiện slider trong JavaScript
Khi chúng ta di chuyển thanh trượt slider, sự kiện input sẽ xảy ra. Và sau khi đã dừng hẳn việc di chuyển slider, sự kiện change sẽ xảy ra.
- Xem thêm: Sự kiện input trong JavaScript
- Xem thêm: Sự kiện change trong JavaScript
Do vậy, chúng ta có thể bắt 2 sự kiện này để xử lý slider.
Ví dụ với sự kiện change:
<input type="range" id="myslider"> |
Hoặc với sự kiện input:
<input type="range" id="myslider"> |
Sau đây hãy cùng xem demo về cách bắt sự kiện slider trong JavaScript:
|
Với mã lệnh này, chúng ta đã tạo ra một slider biểu diễn tinh chỉnh âm lượng:
Bạn có thể di chuyển thanh trượt, và bắt các sự kiện input và change đã xảy ra để lấy giá trị slider hiện tại như sau:
Tổng kết
Trên đây Kiyoshi đã hướng dẫn bạn cách lấy giá trị slider JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.
Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.
URL Link
HOME › học javascript - lập trình javascript cơ bản>>17. form trong javascript