النطاق (Range)

استخدم مدخلات النطاق المخصصة لدينا للحصول على تنسيق متسق عبر المتصفحات وتخصيص مدمج.

في هذه الصفحة

نظرة عامة

أنشئ عناصر تحكم <input type="range"> مخصصة باستخدام .form-range. تم تنسيق كل من المسار (الخلفية) والمقبض (القيمة) ليظهرا بشكل متماثل عبر المتصفحات. وبما أن متصفح Firefox فقط هو الذي يدعم "ملء" المسار من اليسار أو اليمين للمقبض كوسيلة للإشارة بصرياً إلى التقدم، فإننا لا ندعم ذلك حالياً.

Example range

html

<label for="range1" class="form-label">Example range</label>
<input type="range" class="form-range" id="range1">

تعطيل (Disabled)

أضف السمة المنطقية (boolean) disabled على المدخل لإعطائه مظهراً باهتاً، وإزالة أحداث المؤشر، ومنع التركيز.

Disabled range

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

الحد الأدنى والأقصى (Min and max)

تمتلك مدخلات النطاق قيماً ضمنية لـ min و max وهي 0 و 100 على التوالي. يمكنك تحديد قيم جديدة لهما باستخدام السمات min و max.

Example range

html

<label for="range2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="range2">

الخطوات (Steps)

بشكل افتراضي، "تنتقل" مدخلات النطاق إلى قيم صحيحة. لتغيير ذلك، يمكنك تحديد قيمة step. في المثال أدناه، نقوم بمضاعفة عدد الخطوات باستخدام step="0.5".

Example range

html

<label for="range3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="range3">

قيمة المخرجات (Output value)

يمكن عرض قيمة مدخل النطاق باستخدام عنصر output وقليل من الـ JavaScript.

Example range

html

<label for="range4" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="100" value="50" id="range4">
<output for="range4" id="rangeValue" aria-hidden="true"></output>

<script>
  // This is an example script, please modify as needed
  const rangeInput = document.getElementById('range4');
  const rangeOutput = document.getElementById('rangeValue');

  // Set initial value
  rangeOutput.textContent = rangeInput.value;

  rangeInput.addEventListener('input', function() {
    rangeOutput.textContent = this.value;
  });
</script>

الـ (CSS)

متغيرات الـ (Sass)

scss/_variables.scss

$form-range-track-width:          100%;
$form-range-track-height:         .5rem;
$form-range-track-cursor:         pointer;
$form-range-track-bg:             var(--#{$prefix}secondary-bg);
$form-range-track-border-radius:  1rem;
$form-range-track-box-shadow:     var(--#{$prefix}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:             var(--#{$prefix}secondary-color);
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;