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 32: Menu lựa chọn trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
-
Bài 29: Utilities trong Bootstrap 5
-
Bài 30: Flex 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
-
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
Giải phương trình bậc 2 một ẩn bằng Python
Hôm qua 3 -
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua