Bài 34: Range trong Bootstrap 5
Range trong Bootstrap 5 là gì? Cách tạo Range trong Bootstrap 5 như thế nào? Hãy cùng Download.vn tìm hiểu nhé!
Range trong Bootstrap là một phần tử tương tác, cho phép người dùng nhanh chóng trượt qua các giá trị có thể trải rộng trên phạm vi mong muốn.
Phạm vi tùy biến - Custom Range
Để tạo kiểu một menu phạm vi, hãy thêm class .form-range
vào phần tử input với type =”range”
:
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form action="/action_page.php">
<label for="customRange" class="form-label">Phạm vi tùy biến</label>
<input type="range" class="form-range" id="customRange" name="points">
<button type="submit" class="btn btn-primary mt-3">Gửi</button>
</form>
</div>
</body>
</html>
Khoảng cách - Steps
Mặc định, khoảng thời gian giữa các số phạm vi là 1. Bạn có thể thay đổi nó bằng cách dùng thuộc tính step. Code mẫu:
<input type="range" class="form-range" step="10">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Steps trong một Range</h2>
<p>Mặc định khoảng thời gian giữa các số phạm vi là 1. Bạn có thể thay đổi nó bằng cách dùng thuộc tính step:</p>
<form action="/action_page.php">
<label for="customRange" class="form-label">Phạm vi tùy biến</label>
<input type="range" class="form-range" id="customRange" step="10" name="points">
<button type="submit" class="btn btn-primary mt-3">Xác nhận</button>
</form>
</div>
</body>
</html>
Nhỏ nhất và Lớn nhất
Mặc định, giá trị nhỏ nhất là 0 và giá trị lớn nhất là 100. Bạn có thể dùng thuộc tính min và/hoặc max để thay đổi nó. Code mẫu:
<input type="range" class="form-range" min="0" max="4">
Trên đây là tất cả những điều bạn cần biết về thuộc tính Range trong Bootstrap 5. Cách dùng và tạo thuộc tính phạm vi khi lập trình web, ứng dụng bằng Bootstrap khá đơn giản. Vì thế, đừng bỏ qua nhé!
Bạn nên đọc
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 29: Utilities trong Bootstrap 5
-
Bài 30: Flex trong Bootstrap 5
-
Bài 32: Menu lựa chọn trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
2 ngày 7 -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua -
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
3 ngày -
Cách kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
Hình nền trắng, ảnh nền trắng đẹp
3 ngày -
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6 -
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày -
Khối D01 thi môn nào, học ngành nào?
Hôm qua