Rentang

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

Dina kaca ieu

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.

Rentang conto

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.

rentang ditumpurkeun

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

Rentang conto

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

Rentang conto

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;