ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ግዝፈት

ንዘይተለዋወጠ ቅዲ መስቀላዊ-ብራውዘርን ኣብ ውሽጢ ዝተሃንጸ ምምዕርራይን ብሕታዊ ደረጃ እታዎታትና ተጠቐም።

ሓፈሻዊ ትሕዝቶ

ብሕታዊ <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ን ዝበሃሉ ምዃኖም ይፍለጥ

minደረጃ እታዎታት ንን max0ከምኡውን 100, ብቕደም ተኸተል ስዉር ክብርታት ኣለዎም ። ነቶም minand 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;