Mtundu

Gwiritsani ntchito zolowa zathu zamitundu yosiyanasiyana kuti mupange masitayelo osasinthika akusakatula ndikusintha mwamakonda.

Patsamba ili

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.

Zitsanzo zosiyanasiyana

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

Mtundu woyimitsidwa

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

Zitsanzo zosiyanasiyana

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

Zitsanzo zosiyanasiyana

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