Saltu al ĉefa enhavo Saltu al navigado de dokumentoj

Uzu niajn kutimajn gamojn enigojn por konsekvenca trans-retumila stilo kaj enkonstruita personigo.

Superrigardo

Kreu kutimajn <input type="range">kontrolojn per .form-range. La trako (la fono) kaj dikfingro (la valoro) estas ambaŭ stilitaj por aperi la sama tra retumiloj. Ĉar nur Fajrovulpo subtenas "plenigi" ilian trakon de maldekstre aŭ dekstre de la dikfingro kiel rimedo por vide indiki progreson, ni nuntempe ne subtenas ĝin.

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Malebligita

Aldonu la disabledbulean atributon sur enigaĵo por doni al ĝi grizitan aspekton kaj forigi montrokazaĵojn.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min kaj max

Gamaj enigaĵoj havas implicajn valorojn por minkaj max0kaj 100, respektive. Vi povas specifi novajn valorojn por tiuj uzantaj la minkaj maxatributojn.

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Paŝoj

Defaŭlte, intervalo enigaĵoj "krap" al entjervaloroj. Por ŝanĝi ĉi tion, vi povas specifi stepvaloron. En la malsupra ekzemplo, ni duobligas la nombron da paŝoj uzante 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

Variabloj

$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;