Bootstrap 5 phạm vi

Phạm vi tùy chỉnh

Để thiết lập樣式 cho trình đơn phạm vi, hãy đặt .form-range Thêm lớp vào phần tử input có type="range":

Phạm vi tùy chỉnh:

Mô hình

<label for="customRange" class="form-label">Phạm vi tùy chỉnh</label>
<input type="range" class="form-range" id="customRange">

Thử trực tiếp

Bước tăng

Mặc định, khoảng cách giữa các giá trị trong phạm vi là 1. Bạn có thể sử dụng step Thay đổi thuộc tính nó:

Mô hình

<input type="range" class="form-range" step="10">

Thử trực tiếp

Giá trị nhỏ nhất và lớn nhất

Mặc định, giá trị nhỏ nhất là 0, giá trị lớn nhất là 100. Bạn có thể sử dụng min và/hoặc max Thay đổi thuộc tính nó:

Mô hình

<input type="range" class="form-range" min="0" max="4">

Thử trực tiếp