Urwego

Koresha urutonde rwibicuruzwa byinjira kugirango uhuze-mushakisha uhoraho kandi wubatswe.

Kuriyi page

Incamake

Kora <input type="range">igenzura ryigenga hamwe .form-range. Inzira (inyuma) hamwe nigikumwe (agaciro) byombi byanditse kugirango bigaragare kimwe kuri mushakisha. Nkuko Firefox yonyine ishyigikira "kuzuza" inzira zabo uhereye ibumoso cyangwa iburyo bwintoki nkuburyo bwo kwerekana neza iterambere, ntabwo ubu tubishyigikiye.

Urugero

html

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

Abamugaye

Ongeramo disabledikiranga boolean kumurongo winjiza kugirango iguhe ibara risa neza, ikureho ibyabaye, kandi wirinde kwibanda.

Urwego rwahagaritswe

html

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

Min na max

Urutonde rwinjiza rufite indangagaciro zisobanutse kuri minna max- 0na 100, kimwe. Urashobora kwerekana indangagaciro nshya kubakoresha i minna maxIbiranga.

Urugero

html

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

Intambwe

Mburabuzi, urutonde rwinjiza "snap" kumubare wuzuye. Guhindura ibi, urashobora kwerekana stepagaciro. Murugero rukurikira, twikubye kabiri umubare wintambwe dukoresheje step="0.5".

Urugero

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

Ibihinduka

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