Lấy giá trị thanh trượt slider bằng JavaScript | Laptrinhcanban.com

HOME › >>

Lấy giá trị thanh trượt slider bằng JavaScript

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, maxstep 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');
console.log(element.value);

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');
element.value = '60';

Sau đây hãy cùng xem demo lấy giá trị slider JavaScript với mã HTML dưới đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<div>
<label><input type="range" step="10" id="volumeSlider">Âm lượng</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
console.log('Âm lượng hiện tại: ' + volumeSlider.value);
}

let volumeSlider = document.getElementById('volumeSlider');
volumeSlider.value = "60";

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

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.

Lấy giá trị slider JavaScript

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:

Lấy giá trị slider JavaScript

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.

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">

<script>
function inputChange(){
// Các xử lý khi sự kiện change xảy ra.
}

let myslider = document.getElementById('myslider');
myslider.addEventListener('change', inputChange);
</script>

Hoặc với sự kiện input:

<input type="range" id="myslider">

<script>
function inputChange(){
// Các xử lý khi sự kiện input xảy ra.
}

let myslider = document.getElementById('myslider');
myslider.addEventListener('input', inputChange);
</script>

Sau đây hãy cùng xem demo về cách bắt sự kiện slider trong JavaScript:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<div>
<label><input type="range" step="10" id="volumeSlider">Âm lượng</label>
</div>

<p id="msg"></p>

<script>
function inputChange(event){
msg.innerText = 'Âm lượng hiện tại: ' + volumeSlider.value;
}

let volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', inputChange);
let msg = document.getElementById('msg');
</script>

</body>
</html>

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ắt sự kiện slider trong JavaScript

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:

Bắt sự kiện slider trong JavaScript

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

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/form-trong-javascript/lay-gia-tri-thanh-truot-slider-bang-javascript/

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME  › >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.