Luncat ka eusi utama Luncat ka navigasi docs
Check
in English

Rentang

Anggo input rentang khusus kami pikeun gaya cross-browser anu konsisten sareng kustomisasi anu diwangun.

Ihtisar

Jieun <input type="range">kadali custom kalawan .form-range. Lagu (tukang) sareng jempol (nilai) duanana digayakeun pikeun muncul dina panyungsi anu sami. Kusabab ngan ukur Firefox anu ngadukung "ngeusian" laguna ti kénca atanapi katuhu jempol minangka sarana pikeun nunjukkeun kamajuan sacara visual, ayeuna urang henteu ngadukung éta.

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

ditumpurkeun

Tambahkeun disabledatribut boolean dina input pikeun masihan penampilan abu-abu, ngahapus acara pointer, sareng nyegah fokus.

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

Min sareng max

Input rentang gaduh nilai implisit pikeun minsareng max- 0sareng 100, masing-masing. Anjeun tiasa netepkeun nilai anyar pikeun anu nganggo atribut minsareng .max

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

Léngkah

Sacara standar, rentang inputs "snap" kana nilai integer. Pikeun ngarobah ieu, anjeun bisa nangtukeun stepnilai a. Dina conto di handap, urang gandakeun jumlah léngkah ku ngagunakeun 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">

Sass

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;