Julat
Gunakan input julat tersuai kami untuk penggayaan silang penyemak imbas yang konsisten dan penyesuaian terbina dalam.
Gambaran keseluruhan
<input type="range">Buat kawalan tersuai dengan .form-range. Lagu (latar belakang) dan ibu jari (nilai) kedua-duanya digayakan untuk kelihatan sama merentas pelayar. Memandangkan hanya Firefox yang menyokong "mengisi" trek mereka dari kiri atau kanan ibu jari sebagai cara untuk menunjukkan kemajuan secara visual, kami tidak menyokongnya pada masa ini.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Dilumpuhkan
Tambahkan disabledatribut boolean pada input untuk memberikannya rupa yang dikelabukan dan mengalih keluar acara penunjuk.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min dan maks
Input julat mempunyai nilai tersirat untuk mindan max— 0dan 100, masing-masing. Anda boleh menentukan nilai baharu untuk mereka yang menggunakan atribut mindan .max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Langkah-langkah
Secara lalai, julat input "snap" kepada nilai integer. Untuk menukar ini, anda boleh menentukan stepnilai. Dalam contoh di bawah, kami menggandakan bilangan 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">Sass
Pembolehubah
$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;