Gamo

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

Sur ĉi tiu paĝo

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.

Ekzempla gamo

html

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

Malebligita

Aldonu la disabledbulean atributon al enigo por doni al ĝi grizecan aspekton, forigi montrokazaĵojn kaj malhelpi fokuson.

Malfunkciigita intervalo

html

<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 max— 0kaj 100, respektive. Vi povas specifi novajn valorojn por tiuj uzantaj la minkaj maxatributojn.

Ekzempla gamo

html

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

Ekzempla gamo

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

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;