Hamma garaagarummaa

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

Fuula kana irratti

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.

Fakkeenya daangaa

html

<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 kennuudhaaf, taateewwan agarsiisaa haquuf, fi xiyyeeffannoo ittisuu.

Daangaa hanqifame

html

<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 max— 0fi 100, akkaataa walduraa duubaan qabu. Warra amaloota minfi fayyadamaniif gatiiwwan haaraa ifteessuu dandeessa .max

Fakkeenya daangaa

html

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

Fakkeenya daangaa

html

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