Mehutahuta

Diriša ditshenyegelo tša rena tša mohuta wa tlwaelo bakeng sa setaele sa sefapano sa sephephediši se se sa fetogego le go tlwaetša mo go agetšwego ka gare.

Letlakaleng le

Kakaretšo

Hlama <input type="range">ditaolo tša tlwaelo ka .form-range. Pina (morago) le monwana o mogolo (boleng) ka bobedi di rulagantšwe go tšwelela go swana go ralala le diphensele. Ka ge e le Firefox fela yeo e thekgago go “tlatša” pina ya bona go tšwa ka go le letshadi goba ka go le letona la monwana o mogolo bjalo ka mokgwa wa go bontšha tšwelopele ka pono, ga bjale ga re e thekge.

Mohlala wa fapaneng

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Šitišitšwe

Oketša disabledseka sa boolean go tsenyo go e fa ponagalo ya go ba le bohlokwahlokwa le go tloša ditiragalo tša tšhupetšo.

Lefelo le le golofetšego

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min le max

Range inputs na le boleng implicit bakeng sa minle max— 0le 100, ka ho latellana. O ka laetša dikelo tše mpsha tša bao ba šomišago dika tša minle max.

Mohlala wa fapaneng

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Megato

Ka default, fapaneng inputs “snap” ho boleng palo e feletseng. Go fetola se, o ka laeta stepboleng. Mohlaleng wo o lego ka mo tlase, re oketša palo ya megato gabedi ka go diriša step="0.5".

Mohlala wa fapaneng

<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

Diphetogo

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