Phạm vi
Sử dụng đầu vào phạm vi tùy chỉnh của chúng tôi để tạo kiểu trình duyệt nhất quán và tùy chỉnh tích hợp sẵn.
Tổng quan
Tạo <input type="range">
điều khiển tùy chỉnh với .form-range
. Bản nhạc (nền) và ngón tay cái (giá trị) đều được tạo kiểu để xuất hiện giống nhau trên các trình duyệt. Vì chỉ có Firefox hỗ trợ "điền" theo dõi của họ từ bên trái hoặc bên phải của ngón tay cái như một phương tiện để chỉ ra tiến trình một cách trực quan, chúng tôi hiện không hỗ trợ nó.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Vô hiệu hóa
Thêm disabled
thuộc tính boolean trên một đầu vào để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Tối thiểu và tối đa
Các đầu vào phạm vi có các giá trị ngầm định cho min
và max
- 0
và 100
, tương ứng. Bạn có thể chỉ định các giá trị mới cho những giá trị đó bằng cách sử dụng thuộc tính min
và max
.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Các bước
Theo mặc định, phạm vi đầu vào "snap" thành các giá trị số nguyên. Để thay đổi điều này, bạn có thể chỉ định một step
giá trị. Trong ví dụ dưới đây, chúng tôi tăng gấp đôi số bước bằng cách sử dụng step="0.5"
.
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
Sass
Biến
$form-range-track-width: 100%;
$form-range-track-height: .5rem;
$form-range-track-cursor: pointer;
$form-range-track-bg: $gray-300;
$form-range-track-border-radius: 1rem;
$form-range-track-box-shadow: $box-shadow-inset;
$form-range-thumb-width: 1rem;
$form-range-thumb-height: $form-range-thumb-width;
$form-range-thumb-bg: $component-active-bg;
$form-range-thumb-border: 0;
$form-range-thumb-border-radius: 1rem;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg: $gray-500;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;