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.

Eky’okulabirako range

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

Ebanga erilema

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

Eky’okulabirako range

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

Eky’okulabirako range

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