Alue
Käytä mukautetun valikoiman syötteitä johdonmukaiseen tyyliin eri selaimissa ja sisäänrakennettuun mukauttamiseen.
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ä.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Liikuntarajoitteinen
Lisää disabled
looginen attribuutti syötteeseen, jotta se näkyy harmaana ja poista osoitintapahtumat.
<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 min
ja max
— 0
ja 100
vastaavasti. Voit määrittää uusia arvoja niille, jotka käyttävät attribuutteja min
ja .max
<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ä step
arvon. Alla olevassa esimerkissä tuplaamme vaiheiden määrän käyttämällä 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
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;