in English
טווח
השתמש בתשומות הטווח המותאמות אישית שלנו לעיצוב עקבי בין דפדפנים והתאמה אישית מובנית.
בעמוד זה
סקירה כללית
צור <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;