Range trong bootstrap 5

Công nghệ Lập trình Bootstrap 5

14/12
Thạch
Bootstrap 5
0
415

Range trong Bootstrap 5 là gì? Cách tạo Range trong Bootstrap 5 như thế nào? Hãy cùng Sinitc.com tìm hiểu nhé!

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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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ài 35: Input Group trong Bootstrap 5