Masafa

Tumia maingizo yetu maalum ya anuwai kwa mitindo thabiti ya kivinjari na ubinafsishaji uliojumuishwa.

Katika ukurasa huu

Muhtasari

Unda <input type="range">vidhibiti maalum na .form-range. Wimbo (usuli) na kidole gumba (thamani) zote zimeundwa ili kuonekana sawa kwenye vivinjari. Kwa vile Firefox pekee ndiyo inaauni "kujaza" wimbo wao kutoka kushoto au kulia kwa kidole gumba kama njia ya kuonyesha maendeleo, kwa sasa hatuungi mkono.

Mfano mbalimbali

html

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

Imezimwa

Ongeza disabledsifa ya boolean kwenye ingizo ili kuipa mwonekano wa kijivu, ondoa matukio ya vielelezo, na uzuie kulenga.

Masafa yamezimwa

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min na max

Ingizo za fungu la visanduku zina maadili kamili ya minna max- 0na 100, mtawalia. Unaweza kubainisha thamani mpya kwa wale wanaotumia minna maxsifa.

Mfano mbalimbali

html

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Hatua

Kwa chaguo-msingi, ingizo za masafa "hupiga" hadi nambari kamili. Ili kubadilisha hii, unaweza kutaja stepthamani. Katika mfano hapa chini, tunaongeza idadi ya hatua mara mbili kwa kutumia step="0.5".

Mfano mbalimbali

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

Vigezo

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