Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Jangkauan

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

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.

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.

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 max0dan 100, masing-masing. Anda dapat menentukan nilai baru untuk mereka yang menggunakan atribut minand .max

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

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;