Mtundu
Gwiritsani ntchito zolowa zathu zamitundu yosiyanasiyana kuti mupange masitayelo osasinthika akusakatula ndikusintha mwamakonda.
Mwachidule
Pangani zowongolera <input type="range">makonda ndi .form-range. Nyimboyi (kumbuyo) ndi chala chachikulu (mtengo) zonse zidalembedwa kuti ziwonekere mofanana pakusakatula. Monga Firefox yokha imathandizira "kudzaza" nyimbo zawo kuchokera kumanzere kapena kumanja kwa chala chachikulu ngati njira yowonetsera kupita patsogolo, sitikuchirikiza pano.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Wolumala
Onjezani mawonekedwe a disabledboolean pazolowetsa kuti ziwonekere zotuwa ndikuchotsa zochitika zolozera.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min ndi max
Zolowetsa zosiyanasiyana zimakhala ndi zikhalidwe za minndi max- 0ndi 100, motsatana. Mutha kufotokoza zatsopano za omwe akugwiritsa ntchito minndi mawonekedwe max.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Masitepe
Mwachikhazikitso, zolowetsa zamitundu "zimasintha" kumagulu onse. Kuti musinthe izi, mutha kufotokoza stepmtengo. Muchitsanzo chomwe chili pansipa, tikuwirikiza kuchuluka kwa masitepe pogwiritsa ntchito 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
Zosintha
$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;