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 disabled
ievadei 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 min
un max
— 0
un 100
. Varat norādīt jaunas vērtības tiem, kas izmanto min
un max
atribū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 step
vē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;