Alue

Käytä mukautetun valikoiman syötteitä johdonmukaiseen tyyliin eri selaimissa ja sisäänrakennettuun mukauttamiseen.

Tällä sivulla

Yleiskatsaus

Luo mukautettuja <input type="range">säätimiä käyttämällä .form-range. Raita (tausta) ja peukalo (arvo) on suunniteltu näyttämään samalta kaikissa selaimissa. Koska vain Firefox tukee kappaleiden "täyttämistä" peukalon vasemmalla tai oikealla puolella keinona ilmaista visuaalisesti edistymistä, emme tällä hetkellä tue sitä.

Esimerkkialue

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

Liikuntarajoitteinen

Lisää disabledlooginen attribuutti syötteeseen, jotta se näkyy harmaana ja poista osoitintapahtumat.

Poistettu alue

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

Min ja max

Aluetuloilla on implisiittiset arvot minja max— 0ja 100vastaavasti. Voit määrittää uusia arvoja niille, jotka käyttävät attribuutteja minja .max

Esimerkkialue

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

Askeleet

Oletusarvoisesti alueen syötteet "snapsaavat" kokonaislukuarvoihin. Voit muuttaa tätä määrittämällä steparvon. Alla olevassa esimerkissä tuplaamme vaiheiden määrän käyttämällä step="0.5".

Esimerkkialue

<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

Muuttujat

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