Range

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.

Beispill Rei

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.

Behënnert Beräich

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.

Beispill Rei

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

Beispill Rei

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;