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

html

<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, poistaa osoitintapahtumat ja estää tarkentamisen.

Poistettu alue

html

<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

html

<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

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

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;