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.

Šajā lapā

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.

Piemēra diapazons

html

<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, noņemtu rādītāja notikumus un novērstu fokusēšanu.

Atspējots diapazons

html

<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 max— 0un 100. Varat norādīt jaunas vērtības tiem, kas izmanto minun maxatribūtus.

Piemēra diapazons

html

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

Piemēra diapazons

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

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;