Jangkauan

Gunakan input rentang kustom kami untuk gaya lintas-browser yang konsisten dan kustomisasi bawaan.

Di halaman ini

Ringkasan

Buat <input type="range">kontrol khusus dengan .form-range. Trek (latar belakang) dan ibu jari (nilai) keduanya ditata agar tampak sama di seluruh browser. Karena hanya Firefox yang mendukung "mengisi" trek mereka dari kiri atau kanan jempol sebagai sarana untuk menunjukkan kemajuan secara visual, saat ini kami tidak mendukungnya.

Rentang contoh

html

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Dengan disabilitas

Tambahkan disabledatribut boolean pada input untuk memberikan tampilan abu-abu, menghapus peristiwa penunjuk, dan mencegah pemfokusan.

Rentang dinonaktifkan

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min dan maks

Input rentang memiliki nilai implisit untuk mindan max— 0dan 100, masing-masing. Anda dapat menentukan nilai baru untuk mereka yang menggunakan atribut minand .max

Rentang contoh

html

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Langkah

Secara default, rentang memasukkan "snap" ke nilai integer. Untuk mengubah ini, Anda dapat menentukan stepnilai. Pada contoh di bawah ini, kami menggandakan jumlah langkah dengan menggunakan step="0.5".

Rentang contoh

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

Kelancangan

Variabel

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