Bootstrap - Khoảng: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá một chủ đề thú vị chắc chắn sẽ làm bạn yêu thích - đó là Bootstrap Range input. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ dẫn dắt bạn qua hành trình này, từng bước một. Nào, hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng bắt đầu nhé!

Bootstrap Range là gì?

Trước khi chúng ta nhảy vào mã code, hãy cùng hiểu rõ điều chúng ta sẽ làm việc với. Bootstrap Range là phiên bản tùy chỉnh của phần tử HTML5 <input type="range">. Nó cho phép người dùng chọn một giá trị từ một khoảng đã xác định bằng cách trượt một điều khiển theo một thanh. Đó như một phiên bản kỹ thuật số của những thanh trượt bạn thấy trên bảng trộn âm thanh - rất thú vị phải không?

Ví dụ cơ bản

Hãy bắt đầu với một ví dụ đơn giản để làm quen:

<label for="customRange1" class="form-label">Ví dụ khoảng</label>
<input type="range" class="form-range" id="customRange1">

Mã này tạo ra một thanh trượt cơ bản. Phần tử <label> cung cấp một mô tả cho đầu vào khoảng của chúng ta, trong khi phần tử <input> với type="range" tạo ra thanh trượt thực tế. class="form-range" áp dụng phong cách tùy chỉnh của Bootstrap để làm cho nó trông hiện đại và tinh tế.

Khi bạn chạy mã này, bạn sẽ thấy một thanh trượt ngang mà người dùng có thể kéo trái hoặc phải để chọn một giá trị. Mặc định, khoảng này đi từ 0 đến 100.

Thanh trượt bị vô hiệu hóa

Đôi khi, bạn có thể muốn hiển thị một thanh trượt nhưng ngăn không cho người dùng tương tác với nó. Đó là khi thuộc tính disabled phát huy tác dụng:

<label for="disabledRange" class="form-label">Thanh trượt bị vô hiệu hóa</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Ví dụ này tương tự như ví dụ cơ bản của chúng ta, nhưng chúng ta đã thêm thuộc tính disabled vào phần tử <input>. Điều này làm cho thanh trượt变色 và ngăn không cho người dùng tương tác - rất hữu ích khi bạn muốn hiển thị một giá trị nhưng không cho phép thay đổi.

Giá trị Min và Max

Vậy nếu chúng ta muốn thanh trượt của mình đại diện cho một khoảng giá trị cụ thể? Đó là khi các thuộc tính min và max được sử dụng:

<label for="customRange2" class="form-label">Ví dụ khoảng</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Trong ví dụ này, chúng ta đã đặt min="0" và max="5". Bây giờ, thay vì khoảng mặc định 0-100, thanh trượt của chúng ta sẽ đi từ 0 đến 5. Điều này rất hữu ích khi bạn cần kiểm soát chính xác hơn về khoảng giá trị.

Bước

Đôi khi, bạn có thể muốn thanh trượt của mình di chuyển theo các bước cụ thể. Đó là khi thuộc tính step được sử dụng:

<label for="customRange3" class="form-label">Ví dụ khoảng</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Ở đây, chúng ta đã thêm step="0.5" vào ví dụ trước. Điều này có nghĩa là thanh trượt sẽ di chuyển theo các bước 0.5. Vậy các giá trị có thể sẽ là 0, 0.5, 1, 1.5, và vân vân, lên đến 5.

Kết hợp tất cả: Một ví dụ thực tế

Bây giờ chúng ta đã bao gồm các kiến thức cơ bản, hãy cùng tạo một ví dụ phức tạp hơn kết hợp tất cả những gì chúng ta đã học:

<div class="container mt-5">
<h2>Chọn Kích Thước Pizza</h2>
<label for="pizzaSize" class="form-label">Chọn kích thước pizza của bạn (theo inch)</label>
<input type="range" class="form-range" min="8" max="18" step="2" id="pizzaSize">
<p>Kích thước đã chọn: <span id="sizeDisplay">13</span> inch</p>
</div>

<script>
const pizzaSize = document.getElementById('pizzaSize');
const sizeDisplay = document.getElementById('sizeDisplay');

pizzaSize.addEventListener('input', function() {
sizeDisplay.textContent = this.value;
});
</script>

Trong ví dụ này, chúng ta đã tạo một bộ chọn kích thước pizza. Hãy phân tích nó:

1. Chúng ta sử dụng một đầu vào khoảng với min="8", max="18", và step="2". Điều này cho phép người dùng chọn các kích thước pizza số chẵn từ 8 đến 18 inch.
2. Chúng ta đã thêm một phần tử <p> để hiển thị kích thước đã chọn.
3. Chúng ta đã bao gồm một đoạn mã JavaScript để cập nhật kích thước hiển thị theo từng bước khi người dùng di chuyển thanh trượt.

Khi bạn chạy mã này, bạn sẽ thấy một thanh trượt cho phép người dùng chọn kích thước pizza, với kích thước đã chọn được cập nhật ngay lập tức bên dưới thanh trượt. Đó như đang ở một nhà hàng pizza kỹ thuật số!

Kết luận

Và thế là chúng ta đã cùng nhau khám phá qua các kiến thức cơ bản về Bootstrap Range inputs. Từ thanh trượt đơn giản đến các ví dụ tương tác phức tạp, bạn现在已经 có công cụ để thêm một chút phép màu trượt vào dự án web của mình.

Nhớ rằng, thực hành là cách tốt nhất để thành thạo. Hãy thử tạo các đầu vào khoảng của riêng bạn, thử nghiệm với các giá trị min, max, và step khác nhau, và xem bạn có thể tạo ra gì. Có thể là một điều khiển âm lượng cho một máy nghe nhạc? Hoặc một cài đặt độ khó cho một trò chơi? Các khả năng là vô tận!

Chúc các bạn lập trình vui vẻ, và mong rằng các thanh trượt của bạn luôn trượt mượt mà!

Credits: Image by storyset