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.

Trên trang này

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ó.

Phạm vi ví dụ

html

<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, loại bỏ các sự kiện con trỏ và ngăn việc lấy nét.

Phạm vi bị vô hiệu hóa

html

<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

Đầu vào phạm vi có các giá trị ngầm định cho minvà max- 0và 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 minvà max.

Phạm vi ví dụ

html

<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 nhập "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".

Phạm vi ví dụ

html

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