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