Range
Shandisa yedu yakajairwa renji mapeji ekuenderana kuchinjika-browser styling uye yakavakirwa-mukati magadzirirwo.
Overview
Gadzira zvidzoreso zvetsika <input type="range">
ne .form-range
. Iyo track (yekumashure) uye chigunwe (ukoshi) zvese zvakadhindwa kuti zvioneke zvakafanana pamabhurawuza. Sezvo Firefox chete inotsigira "kuzadza" track yavo kubva kuruboshwe kana kurudyi kwechigunwe senzira yekuratidza kufambira mberi, isu hatizvitsigire parizvino.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Yakaremara
Wedzera iyo disabled
boolean hunhu pane yekuisa kuti iite grey kunze uye bvisa chinongedzo zviitiko.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Min uye max
Rondedzero yemukati ine hunhu hwakajeka hwe min
uye max
- 0
uye 100
, zvichiteerana. Unogona kutsanangura hutsva hutsva kune avo vanoshandisa min
uye max
hunhu.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Matanho
Nekumisikidza, renji inoiswa "snap" kune yakazara kukosha. Kuti uchinje izvi, unogona kutsanangura step
kukosha. Mumuenzaniso uri pasi apa, tinopeta nhamba yematanho nekushandisa 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
Variables
$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;