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.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Abamugaye
Ongeramo disabledikiranga boolean kumurongo winjiza kugirango uguhe imvi zisa kandi ukureho ibyabaye.
<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.
<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".
<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;