טווח

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

בעמוד זה

סקירה כללית

צור <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;