Julat

Gunakan input julat tersuai kami untuk penggayaan silang pelayar yang konsisten dan penyesuaian terbina dalam.

Pada halaman ini

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.

Julat contoh

html

<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 penampilan kelabu, mengalih keluar acara penunjuk dan menghalang pemfokusan.

Julat dilumpuhkan

html

<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

Julat contoh

html

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

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

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;