Trong Bootstrap 5, có một thành phần mới được giới thiệu là Range, giúp tạo ra thanh trượt ngang để chọn giá trị từ một khoảng đã định. Range trong Bootstrap 5 giúp tạo ra giao diện đa dạng và tương tác dễ dàng cho người dùng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về cách sử dụng và tùy biến Range trong Bootstrap 5, cũng như xem một số ví dụ kèm code mẫu.

1. Cách tạo Range trong Bootstrap 5

Để tạo một Range đơn giản, bạn chỉ cần thêm class .form-range vào phần tử input với type=“range”. Ví dụ:

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Kết quả:

Bạn có thể thêm thuộc tính name để gán tên cho Range, và thuộc tính value để đặt giá trị mặc định cho Range. Ví dụ:

<label for="customRange2" class="form-label">Example range with name and value</label>
<input type="range" class="form-range" id="customRange2" name="points" value="50">

Kết quả:

Bạn cũng có thể thêm thuộc tính disabled để vô hiệu hóa Range, khiến nó có màu xám và không thể tương tác. Ví dụ:

<label for="customRange3" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="customRange3" disabled>

Kết quả:

>>>>> Xem thêm các bài viết tương tự tại đây:

2. Cách tùy biến Range trong Bootstrap 5

Bootstrap 5 cung cấp một số thuộc tính để chúng ta có thể tùy biến Range theo ý muốn. Chúng ta có thể dễ dàng thay đổi giá trị tối thiểu, tối đa, bước nhảy, màu sắc và kích thước của Range. Sau đây là một số ví dụ:

2.1. Thay đổi giá trị tối thiểu và tối đa

Mặc định, giá trị tối thiểu của Range là 0 và giá trị tối đa là 100. Bạn có thể sử dụng thuộc tính min và max để thay đổi giá trị này. Ví dụ:

<label for="customRange4" class="form-label">Example range with min and max</label>
<input type="range" class="form-range" id="customRange4" min="10" max="90">

Kết quả:

2.2. Thay đổi bước nhảy

Mặc định, bước nhảy của Range là 1, tức là giá trị sẽ tăng hoặc giảm từng đơn vị khi kéo thanh trượt. Bạn có thể sử dụng thuộc tính step để thay đổi bước nhảy này. Ví dụ:

<label for="customRange5" class="form-label">Example range with step</label>
<input type="range" class="form-range" id="customRange5" step="10">

Kết quả:

2.3. Thay đổi màu sắc

Mặc định, màu sắc của Range là màu xanh lá cây. Bạn có thể sử dụng các class .bg-* và .text-* để thay đổi màu nền và màu chữ của Range. Ví dụ:

<label for="customRange6" class="form-label">Example range with color</label>
<input type="range" class="form-range bg-danger text-white" id="customRange6">

Kết quả:

2.4. Thay đổi kích thước

Mặc định, kích thước của Range là nhỏ. Bạn có thể sử dụng các class .form-range-lg và .form-range-sm để thay đổi kích thước của Range. Ví dụ:

<label for="customRange7" class="form-label">Large range</label>
<input type="range" class="form-range form-range-lg" id="customRange7">
<label for="customRange8" class="form-label">Small range</label>
<input type="range" class="form-range form-range-sm" id="customRange8">

Kết quả:

Kết luận

Hy vọng bài viết này đã mang lại nhiều kiến thức hơn về cách sử dụng Range trong Bootstrap 5, cũng như cung cấp một số ví dụ kèm code mẫu để tham khảo. Hẹn gặp lại bạn ở các bài viết khác của Stringee tại đây.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom