ViệtThanh trượt (Range) là một thành phần biểu mẫu quan trọng, cho phép người dùng chọn một giá trị trong một khoảng xác định bằng cách kéo thanh trượt. Bootstrap 5 cung cấp class form-range để dễ dàng tạo thanh trượt đẹp mắt và đồng nhất với các thành phần khác của form. Trong bài viết này, CodeTutHub sẽ giới thiệu cách sử dụng thành phần Range trong Bootstrap 5, bao gồm cách tạo thanh trượt cơ bản, tùy chỉnh trạng thái, và một số ví dụ thực tế.
1. Thanh trượt
Để tạo thanh trượt cơ bản trong Bootstrap 5, chỉ cần sử dụng thẻ <input type="range"> với class form-range. Thanh trượt mặc định có khoảng giá trị từ 0 đến 100 và có bước di chuyển là 1.
Ví dụ thanh trượt
<div class="mb-3">
<label for="basicRange" class="form-label">Chọn giá trị</label>
<input type="range" class="form-range" id="basicRange">
</div>Trong ví dụ này, class form-range được thêm vào <input type="range"> để tạo kiểu cho thanh trượt, giúp nó hòa hợp với các thành phần biểu mẫu khác trong Bootstrap.
2. Tùy chỉnh khoảng giá trị và bước nhảy
Bạn có thể tùy chỉnh khoảng giá trị (min, max) và bước nhảy (step) của thanh trượt để đáp ứng nhu cầu cụ thể của biểu mẫu. Điều này rất hữu ích khi bạn muốn giới hạn phạm vi giá trị hoặc điều chỉnh độ nhạy của thanh trượt.
Ví dụ thanh trượt tùy chỉnh giá trị
<div class="mb-3">
<label for="customRange" class="form-label">Chọn độ sáng (0 - 200)</label>
<input type="range" class="form-range" min="0" max="200" step="10" id="customRange">
</div>Trong ví dụ này:
min="0"đặt giá trị nhỏ nhất của thanh trượt là 0.max="200"đặt giá trị lớn nhất là 200.step="10"cho phép thanh trượt di chuyển theo bước nhảy 10 đơn vị.
3. Hiển thị giá trị hiện tại của thanh trượt
Một tính năng hữu ích là hiển thị giá trị hiện tại của thanh trượt khi người dùng di chuyển. Điều này có thể thực hiện dễ dàng bằng cách sử dụng JavaScript để cập nhật giá trị hiển thị mỗi khi thanh trượt thay đổi.
Ví dụ hiển thị giá trị hiện tại
<div class="mb-3">
<label for="rangeWithValue" class="form-label">Độ tuổi: <span id="rangeValue">25</span></label>
<input type="range" class="form-range" min="0" max="100" value="25" id="rangeWithValue" oninput="document.getElementById('rangeValue').innerText = this.value">
</div>Trong ví dụ này, oninput được sử dụng để cập nhật giá trị của thanh trượt (rangeValue) khi người dùng di chuyển nó.
4. Thanh trượt có nhiều mức độ tùy chỉnh
Bootstrap 5 cho phép tạo các thanh trượt với nhiều kiểu khác nhau, chẳng hạn như thanh trượt có màu sắc tùy chỉnh để hiển thị mức độ hoặc trạng thái.
Ví dụ thanh trượt với nhiều mức độ màu sắc
Bạn có thể thêm CSS tùy chỉnh để làm nổi bật các mức độ trên thanh trượt, chẳng hạn như thay đổi màu sắc dựa trên giá trị.
<style>
#customColorRange {
background: linear-gradient(to right, #28a745 0%, #ffc107 50%, #dc3545 100%);
}
</style>
<div class="mb-3">
<label for="customColorRange" class="form-label">Chọn mức độ</label>
<input type="range" class="form-range" min="0" max="100" id="customColorRange">
</div>Trong ví dụ này, linear-gradient được áp dụng vào thanh trượt để tạo hiệu ứng màu sắc từ xanh đến đỏ, giúp người dùng dễ dàng nhận diện các mức độ khác nhau.
5. Thanh trượt không thể chọn (Disabled)
Khi bạn muốn hiển thị thanh trượt nhưng không cho phép người dùng thay đổi giá trị, bạn có thể thêm thuộc tính disabled vào thành phần <input type="range">.
Ví dụ thanh trượt không thể chọn
<div class="mb-3">
<label for="disabledRange" class="form-label">Chọn giá trị (Không thể chọn)</label>
<input type="range" class="form-range" id="disabledRange" disabled>
</div>Trong ví dụ này, thuộc tính disabled làm cho thanh trượt không thể thay đổi, thích hợp để hiển thị các giá trị tĩnh hoặc tham khảo.
6. Sử dụng thanh trượt với validation (Xác thực)
Bootstrap 5 hỗ trợ xác thực cho thanh trượt với các class is-valid và is-invalid, cho phép bạn hiển thị các trạng thái hợp lệ và không hợp lệ.
Ví dụ với validation
<div class="mb-3">
<label for="validatedRange" class="form-label">Chọn độ tuổi</label>
<input type="range" class="form-range is-invalid" min="0" max="100" id="validatedRange">
<div class="invalid-feedback">Vui lòng chọn giá trị hợp lệ.</div>
</div>Trong ví dụ này, class is-invalid được sử dụng để hiển thị trạng thái không hợp lệ của thanh trượt, cùng với thông báo lỗi trong invalid-feedback.
Kết luận
Thành phần Range trong Bootstrap 5 cung cấp cách linh hoạt và dễ sử dụng để tạo các thanh trượt tương tác trong biểu mẫu. Từ các thanh trượt cơ bản đến các thanh trượt có màu sắc tùy chỉnh và trạng thái xác thực, bạn có thể dễ dàng điều chỉnh thành phần này để đáp ứng nhu cầu của mình. Hãy áp dụng các ví dụ trong bài viết này để xây dựng thanh trượt chuyên nghiệp và tối ưu trải nghiệm người dùng cho trang web của bạn!
