Svetuka kune chikuru content Svetuka kuenda kudocs navigation

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

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

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