Gamo
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 max— 0kaj 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;