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