Gamă
Utilizați intrările noastre personalizate pentru un stil consecvent între browsere și personalizare încorporată.
Prezentare generală
Creați <input type="range">controale personalizate cu .form-range. Piesa (fondul) și degetul mare (valoarea) sunt ambele stilate astfel încât să apară la fel în toate browserele. Deoarece numai Firefox acceptă „umplerea” piesei lor din stânga sau din dreapta degetului mare ca mijloc de a indica vizual progresul, în prezent nu îl acceptăm.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Dezactivat
Adăugați disabledatributul boolean pe o intrare pentru a-i da un aspect gri, pentru a elimina evenimentele pointer și pentru a preveni focalizarea.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min și max
Intrările de interval au valori implicite pentru minși max, 0respectiv 100, . Puteți specifica noi valori pentru cei care folosesc atributele minși .max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Pași
În mod implicit, intrările intervalului „snap” la valori întregi. Pentru a schimba acest lucru, puteți specifica o stepvaloare. În exemplul de mai jos, dublăm numărul de pași folosind 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
Variabile
$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;