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.
<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 dan menghapus peristiwa penunjuk.
<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
<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".
<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;