ክልል

ለተከታታይ የአሳሽ አሰራር እና አብሮገነብ ማበጀት የእኛን ብጁ ክልል ግብዓቶች ይጠቀሙ።

በዚህ ገጽ ላይ

አጠቃላይ እይታ

በ ጋር ብጁ <input type="range">መቆጣጠሪያዎችን ይፍጠሩ .form-range። ትራኩ (ዳራ) እና አውራ ጣት (እሴቱ) ሁለቱም በአሳሾች ላይ ተመሳሳይ ሆነው እንዲታዩ የተቀየሱ ናቸው። ፋየርፎክስን ብቻ ከአውራ ጣት ከግራ ወይም ከቀኝ "መሙላት" እንደሚደግፍ በእይታ እድገትን ለማመልከት እኛ በአሁኑ ጊዜ አንደግፈውም።

የምሳሌ ክልል

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