ክልል

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

በዚህ ገጽ ላይ

አጠቃላይ እይታ

በ ጋር ብጁ <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- 0እና 100፣ እንደቅደም ተከተላቸው ስውር እሴቶች አሏቸው ። minአዲስ እሴቶችን እና ባህሪያቱን ለሚጠቀሙ ሰዎች መግለጽ ይችላሉ max።

የምሳሌ ክልል

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;