Range

Shandisa yedu yakajairwa renji mapeji ekuenderana kuchinjika-browser styling uye yakavakirwa-mukati magadzirirwo.

Pa peji ino

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.

Muenzaniso range

html

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

Yakaremara

Wedzera iyo disabledboolean hunhu pane inopinza kuti iite grey kunze chitarisiko, bvisa chinongedzo zviitiko, uye kudzivirira kutarisa.

Disabled range

html

<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 minuye max- 0uye 100, zvichiteerana. Unogona kutsanangura hutsva hutsva kune avo vanoshandisa minuye maxhunhu.

Muenzaniso range

html

<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 stepkukosha. Mumuenzaniso uri pasi apa, tinopeta nhamba yematanho nekushandisa step="0.5".

Muenzaniso range

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

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;