diapazonas
Naudokite mūsų pasirinktinio diapazono įvestis, kad sukurtumėte nuoseklų kelių naršyklių stilių ir integruotą tinkinimą.
Apžvalga
Sukurkite pasirinktinius <input type="range">
valdiklius naudodami .form-range
. Takelis (fonas) ir nykštis (vertė) yra sukurti taip, kad visose naršyklėse atrodytų vienodai. Kadangi tik „Firefox“ palaiko takelio „užpildymą“ iš kairės arba dešinės nykščio, kad būtų galima vizualiai parodyti pažangą, šiuo metu mes to nepalaikome.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Išjungta
Pridėkite disabled
loginį atributą įvestyje, kad ji būtų pilka, ir pašalintumėte žymiklio įvykius.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Min ir maks
min
Diapazono įvestis turi numanomas ir max
— 0
ir 100
atitinkamai reikšmes . Galite nurodyti naujas reikšmes tiems, kurie naudoja min
ir max
atributus.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Žingsniai
Pagal numatytuosius nustatymus diapazono įvestis „prisijungia“ prie sveikųjų skaičių. Norėdami tai pakeisti, galite nurodyti step
reikšmę. Toliau pateiktame pavyzdyje mes padvigubiname žingsnių skaičių naudodami 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
Kintamieji
$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;