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

html

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Išjungta

Pridėkite disabledloginį atributą prie įvesties, kad ji atrodytų pilka, pašalintumėte žymiklio įvykius ir išvengtumėte fokusavimo.

Išjungtas diapazonas

html

<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

html

<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

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

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;