diapazonas

Naudokite mūsų pasirinktinio diapazono įvestis, kad sukurtumėte nuoseklų kelių naršyklių stilių ir integruotą tinkinimą.

Šiame puslapyje

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.

Pavyzdinis diapazonas

<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.

Išjungtas diapazonas

<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.

Pavyzdinis diapazonas

<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".

Pavyzdinis diapazonas

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