Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check

Benotzt eis personaliséiert Gamme-Inputen fir konsequent Cross-Browser Styling a gebauter Personnalisatioun.

Op dëser Säit

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.

html
<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, Zeigerevenementer ewechzehuelen a Fokus ze vermeiden.

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

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

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

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;