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>

Range trong Bootstrap 5

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>

Steps trong một Range

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é!

Thứ Sáu, 09/12/2022 09:35

5 ★ 2 👨 404

Bài trước

Bài 33: Checkbox và Radio Button trong Bootstrap 5

Bài sau

Bài 35: Input Group trong Bootstrap 5

#Bootstrap

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!