ግዝፈት

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

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

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

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