Range

Gunakake input kisaran khusus kanggo gaya lintas-browser sing konsisten lan kustomisasi sing dibangun.

Ing kaca iki

Ringkesan

Gawe <input type="range">kontrol khusus nganggo .form-range. Trek (latar mburi) lan jempol (nilai) loro-lorone ditata supaya katon padha ing browser. Amarga mung Firefox sing ndhukung "ngisi" trek saka kiwa utawa tengen jempol minangka sarana kanggo nuduhake kemajuan kanthi visual, saiki kita ora ndhukung.

Conto sawetara

html

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

dipatèni

Tambah disabledatribut boolean ing input kanggo menehi tampilan abu-abu, mbusak acara pointer, lan nyegah fokus.

Kisaran dipatèni

html

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

Min lan maks

input Range duwe nilai implisit kanggo minlan max- 0lan 100, mungguh. Sampeyan bisa nemtokake nilai anyar kanggo sing nggunakake atribut minlan .max

Conto sawetara

html

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

Langkah-langkah

Kanthi gawan, sawetara input "snap" menyang nilai integer. Kanggo ngganti iki, sampeyan bisa nemtokake stepnilai. Ing conto ing ngisor iki, kita pindho jumlah langkah kanthi nggunakake step="0.5".

Conto sawetara

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;