Masafa
Tumia maingizo yetu maalum ya anuwai kwa mitindo thabiti ya kivinjari na ubinafsishaji uliojumuishwa.
Muhtasari
Unda <input type="range">
vidhibiti maalum na .form-range
. Wimbo (usuli) na kidole gumba (thamani) zote zimeundwa ili kuonekana sawa kwenye vivinjari. Kwa vile Firefox pekee ndiyo inaauni "kujaza" wimbo wao kutoka kushoto au kulia kwa kidole gumba kama njia ya kuonyesha maendeleo, kwa sasa hatuungi mkono.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Imezimwa
Ongeza disabled
sifa ya boolean kwenye ingizo ili kuipa mwonekano wa kijivu na uondoe matukio ya kielekezi.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Min na max
Ingizo za fungu la visanduku zina maadili kamili ya min
na max
- 0
na 100
, mtawalia. Unaweza kubainisha thamani mpya kwa wale wanaotumia min
na max
sifa.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Hatua
Kwa chaguo-msingi, ingizo za masafa "hupiga" hadi nambari kamili. Ili kubadilisha hii, unaweza kutaja step
thamani. Katika mfano hapa chini, tunaongeza idadi ya hatua mara mbili kwa kutumia 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
Vigezo
$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;