Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Diapazons

Izmantojiet mūsu pielāgotās diapazona ievades, lai nodrošinātu konsekventu vairāku pārlūkprogrammu stilu un iebūvētu pielāgošanu.

Pārskats

Izveidojiet pielāgotas <input type="range">vadīklas, izmantojot .form-range. Ieraksts (fons) un īkšķis (vērtība) ir veidoti tā, lai visās pārlūkprogrammās būtu vienādi. Tā kā tikai Firefox atbalsta celiņa “aizpildīšanu” no īkšķa kreisās vai labās puses, lai vizuāli norādītu progresu, mēs to pašlaik neatbalstām.

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

Atspējots

Pievienojiet disabledievadei Būla atribūtu, lai piešķirtu tai pelēku izskatu un noņemtu rādītāja notikumus.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min. un max

Diapazona ievadiem ir netiešas vērtības attiecīgi minun max0un 100. Varat norādīt jaunas vērtības tiem, kas izmanto minun maxatribūtus.

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Soļi

Pēc noklusējuma diapazona ievades tiek “pieslēgtas” veselām vērtībām. Lai to mainītu, varat norādīt stepvērtību. Tālāk esošajā piemērā mēs dubultojam soļu skaitu, izmantojot 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

Mainīgie lielumi

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