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 disabledloginį 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
minDiapazono įvestis turi numanomas ir max— 0ir 100atitinkamai reikšmes . Galite nurodyti naujas reikšmes tiems, kurie naudoja minir maxatributus.
<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 stepreikš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;