Luncat ka eusi utama Luncat ka navigasi docs
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 (kasang tukang) sareng jempol (nilai) duanana ditata supados sami dina panyungsi. 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.

<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 sareng ngahapus acara pointer.

<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

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

<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;