Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Urwego

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

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.

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.

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.

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

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;