Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Ebanga

Kozesa ebiyingizibwa byaffe eby’enjawulo eby’enjawulo okusobola okukola sitayiro ya cross-browser ekwatagana n’okulongoosa okuzimbibwamu.

Ku muko guno

Okulaba okutwalira awamu

Tonda <input type="range">ebifuga eby'ennono ne .form-range. Oluyimba (emabega) n’engalo ensajja (omuwendo) byombi bikoleddwa mu sitayiro okulabika kye kimu mu bulawuzi zonna. Nga Firefox yokka bw’ewagira “okujjuza” oluyimba lwabwe okuva ku kkono oba ku ddyo w’engalo ensajja ng’engeri y’okulaga mu maaso enkulaakulana, mu kiseera kino tetugiwagira.

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

Obutesobola

Okwongerako disabledboolean attribute ku input okugiwa endabika eya greyed out n'okuggyawo ebibaddewo mu pointer.

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

Min ne max

Ebiyingizibwa mu bbanga birina emiwendo egy’enjawulo egya minne max— 0ne 100, mu kulondako. Oyinza okulaga emiwendo emipya eri abo abakozesa ebifaananyi minne max.

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

Emitendera

Nga bwekiba, ebiyingizibwa mu bbanga “snap” ku miwendo gya namba enzijuvu. Okukyusa kino, osobola okulaga stepomuwendo. Mu kyokulabirako wansi, tukubisaamu emirundi ebiri omuwendo gw’emitendera nga tukozesa 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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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