Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

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 disabledthuộ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 minmax- 0100, 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 minmax.

<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 stepgiá 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;