Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Hamma garaagarummaa

Galteewwan hammangaa amala keenyaa akkaataa qaxxaamuraa-browser walfakkaataa fi dhuunfachiisaa ijaarameef fayyadami.

Haala Waliigalaa

<input type="range">To'annoowwan amala waliin uumi .form-range. Hordoffiin (duuba) fi qubni guddaan (gatii) lamaan isaanii akkaataa biraawzaroota hunda keessatti walfakkaataa ta'anii mul'ataniiru. Firefox qofti akka mala guddina mul’ataan agarsiisuutti track isaanii bitaa ykn mirga qubbee irraa “guutuu” waan deeggaruuf, yeroo ammaa hin deeggarru.

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

Miidhamaa

disabledAmala boolii galtee irratti dabali mul'ata halluu diimaa qabu kennuu fi taateewwan agarsiisaa haquuf.

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

Min fi max

Galteewwan hangaa gatiiwwan icciitii minfi max0fi 100, akkaataa walduraa duubaan qabu. Warra amaloota minfi fayyadamaniif gatiiwwan haaraa ifteessuu dandeessa .max

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

Tarkaanfiiwwan

Akka durtiitti, galteewwan hangaa “snap” gara gatiiwwan lakkoofsa guutuutti. Kana jijjiiruuf, stepgatii ifteessuu dandeessa. Fakkeenya armaan gadii keessatti, fayyadamuun lakkoofsa tarkaanfiiwwanii dachaa lama guddifna 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 jedhama

Jijjiiramoota

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