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 disabled
ikiranga 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 min
na max
- 0
na 100
, kimwe. Urashobora kwerekana indangagaciro nshya kubakoresha i min
na max
Ibiranga.
<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 step
agaciro. 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;