Range
Benotzt eis personaliséiert Gamme-Inputen fir konsequent Cross-Browser Styling a gebauter Personnalisatioun.
Iwwersiicht
Erstellt personaliséiert <input type="range">Kontrollen mat .form-range. D'Streck (den Hannergrond) an den Daumen (de Wäert) sinn allebéid stylesch fir d'selwecht iwwer Browser ze erschéngen. Well nëmmen Firefox ënnerstëtzt hir Streck vu lénks oder riets vum Daum ze "fillen" als Mëttel fir visuell Fortschrëtter ze weisen, ënnerstëtzen mir et am Moment net.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Behënnert
Füügt de disabledbooleschen Attribut op en Input fir et e grau Erscheinungsbild ze ginn an Zeigerevenementer ze läschen.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min a Max
Range-Inputen hunn implizit Wäerter fir minan max- 0an 100, respektiv. Dir kënnt nei Wäerter spezifizéieren fir déi déi d' minAttributer maxbenotzen.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Schrëtt
Par défaut, Gamme Input "snap" op ganz Zuelen Wäerter. Fir dëst z'änneren, kënnt Dir e stepWäert uginn. Am Beispill hei drënner verduebele mir d'Zuel vun de Schrëtt mat 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
Variablen
$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;