קייט
ניצן אונדזער מנהג קייט ינפּוץ פֿאַר קאָנסיסטענט קרייז-בלעטערער סטילינג און געבויט-אין קוסטאָמיזאַטיאָן.
איבערבליק
שאַפֿן מנהג <input type="range">קאָנטראָלס מיט .form-range. דער שפּור (דער הינטערגרונט) און גראָבער פינגער (די ווערט) זענען ביידע סטיילד צו דערשייַנען די זעלבע אַריבער בראַוזערז. ווי בלויז Firefox שטיצט "פילונג" זייער שפּור פון די לינקס אָדער רעכט פון די גראָבער פינגער ווי אַ מיטל צו וויזשוואַלי אָנווייַזן פּראָגרעס, מיר טאָן ניט שטיצן עס דערווייַל.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">פאַרקריפּלט
לייג די disabledבוליאַן אַטריביוט אויף אַן אַרייַנשרייַב צו געבן עס אַ גרייערד אויסזען, באַזייַטיקן טייַטל געשעענישן און פאַרמייַדן פאָוקיסינג.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>מינימום און מאַקס
קייט ינפּוץ האָבן ימפּליסאַט וואַלועס פֿאַר minאון max- 0און 100ריספּעקטיוולי. איר קענט ספּעציפיצירן נייַע וואַלועס פֿאַר יענע וואָס נוצן די minאון maxאַטריביוץ.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">סטעפּס
דורך פעליקייַט, קייט ינפּוץ "קנאַקן" צו ינטאַדזשער וואַלועס. צו טוישן דעם, איר קענען ספּעציפיצירן אַ stepווערט. אין דעם בייַשפּיל אונטן, מיר טאָפּל די נומער פון סטעפּס דורך ניצן 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">סאַס
וועריאַבאַלז
$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;