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
disabled
Amala 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 min
fi max
— 0
fi 100
, akkaataa walduraa duubaan qabu. Warra amaloota min
fi 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, step
gatii 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;