דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

טווח

השתמש בתשומות הטווח המותאמות אישית שלנו לעיצוב עקבי בין דפדפנים והתאמה אישית מובנית.

סקירה כללית

צור <input type="range">פקדים מותאמים אישית עם .form-range. המסלול (הרקע) והאגודל (הערך) מעוצבים שניהם כך שיראו אותו הדבר בדפדפנים. מכיוון שרק פיירפוקס תומך ב"מילוי" המסלול שלהם משמאל או ימין של האגודל כאמצעי להצביע על התקדמות חזותית, אנחנו לא תומכים בו כרגע.

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

נָכֶה

הוסף את disabledהתכונה הבוליאנית בקלט כדי לתת לו מראה אפור, להסיר אירועי מצביע ולמנוע מיקוד.

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

מינימום ומקסימום

לקלט טווח יש ערכים מרומזים עבור minו- ו max, בהתאמה. אתה יכול לציין ערכים חדשים עבור אלה המשתמשים בתכונות ו .0100minmax

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

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

סאס

משתנים

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