في هذا الدرس 5تصفّح المواضيع
يُعد عنصر شريط السحب الرقمي <input type="range"> أداة مثالية لضبط مستويات الصوت أو سطوع الشاشة أو سقف الميزانية أو سعة التخزين السحابي، غير أن مظهره الأصلي يختلف جذرياً بين محركات Chromium وFirefox وSafari.
يحل الكلاس الحديث .form-range في Bootstrap 5 (بديلاً عن الكلاس الملغى custom-range) هذه الفجوة عبر تنسيق مسار السحب الخلفي ومقبض الدائرة الزرقاء وحلقة التركيز المضيئة بمظهر موحد وعرض كامل 100%، مع ضرورة ربطه دائماً بتسمية <label class="form-label"> واضحة.
<label for="volRange" class="form-label">
Audio Volume
</label>
<input type="range" class="form-range" id="volRange">يمتد أي حقل نطاق رقمي افتراضياً من القيمة الصغرى min="0" إلى القيمة الكبرى max="100"، ويستقر المقبض في المنتصف تماماً عند 50 ما لم تحدد سمة value ابتدائية صريحة.
يمكنك تخصيص هذا المجال لأي أعداد صحيحة أو عشرية تناسب منطق تطبيقك، مثل حصر عدد عُقد الخادم بين عقدة واحدة واثنتي عشرة عقدة عبر ضبط min="1" وmax="12".
<label for="nodes" class="form-label">
Cluster Nodes (1 to 8)
</label>
<input type="range" class="form-range" id="nodes"
min="1" max="8" value="3">يتحرك المقبض افتراضياً بمقدار قفزة تساوي واحداً صحيحاً step="1" في كل خطوة. إذا أردت السماح بقيم كسرية ناعمة مثل التقييم بنصف نجمة فاستخدم step="0.5"، أو لقفزات عشرية كبيرة في التسعير استخدم step="50"، كما تتيح القيمة step="any" تحريكاً متصلاً حر الكسور دون تقييد بنقاط توقف متقطعة.
<label for="zoom" class="form-label">
Zoom Scale (0.5x to 3x, step 0.5)
</label>
<input type="range" class="form-range" id="zoom"
min="0.5" max="3" step="0.5" value="1.5">عندما يكون خيار السعة أو الدقة مقفلاً لحساب مجاني، أضف السمة المنطقية disabled إلى عنصر <input type="range" class="form-range">. يغيّر بوتستراب لون مقبض الدائرة تلقائياً من الأزرق النشط إلى الرمادي المحايد، ويمنع سحبه بالفأرة أو اللمس أو لوحة المفاتيح مع استبعاد قيمته عند إرسال النموذج.
اختبر السحب الحي والقفزات وحالة التعطيل في المحاكي التفاعلي التالي:
لا يعرض متصفح الويب الرقم المحدد فوق شريط السحب من تلقاء نفسه؛ لذلك فإن ترك المستخدم يسحب .form-range دون رقم مرئي يُضعف دقة التجربة. الحل الدلالي الأمثل في HTML5 هو وضع عنصر النتيجة القياسي <output for="rangeId"> بجانب التسمية، وتحديث نصه فورياً عبر الاستماع لحدث input في JavaScript.
انتبه إلى الفرق الجوهري بين الحدثين: حدث input يُطلق مع كل ملليمتر يتحركه المقبض لحظياً، بينما لا يُطلق حدث change إلا بعد أن يرفع المستخدم إصبعه عن زر الفأرة.
<label for="cap" class="form-label">Monthly Cap</label>
<output id="out" for="cap" class="fw-bold">$300</output>
<input type="range" class="form-range" id="cap"
min="50" max="1000" step="50" value="300">
<script>
const r = document.getElementById('cap');
const o = document.getElementById('out');
r.oninput = () => { o.value = '$' + r.value; };
</script>يوضح الجدول المرجعي التالي كافة كلاسات وسمات وأحداث شريط النطاق الرقمي في Bootstrap 5.3:
| الكلاس أو السمة أو الحدث | الموضع | الوظيفة الدقيقة والسلوك الافتراضي |
|---|---|---|
.form-range | <input type="range"> | توحيد شكل المسار والمقبض عبر المتصفحات بعرض 100% وحلقة تركيز متاحة |
min وmax | عنصر الشريط | تحديد القيمة الصغرى (افتراضياً 0) والكبرى (افتراضياً 100) |
step | عنصر الشريط | تحديد مقدار القفزة الرقمية لكل حركة (افتراضياً 1، أو كسر عشري، أو any) |
disabled | عنصر الشريط | تعطيل تحريك المقبض وتلوينه بالرمادي واستبعاد الحقل من الإرسال |
<output for="..."> | بجانب <label> | عنصر دلالي متاح لعرض القيمة الرقمية الحالية لقارئات الشاشة والمبصرين |
حدث input | مستمع JavaScript | التقاط تغير القيمة في كل لحظة أثناء السحب قبل إفلات المؤشر |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تنسيق أشرطة النطاق الموحدة عبر المتصفحات بكلاس .form-range، وضبط حدود min وmax ومقدار القفزة step، وإدارة حالة التعطيل، وربط الشريط بعنصر <output> عبر حدث input لعرض القيمة لحظياً. الخطوة التالية: انتقل الآن إلى درس «مجموعات الإدخال المدمجة في بوتستراب 5» لإلحاق الرموز والنصوص والأزرار مباشرة قبل الحقول أو بعدها.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Form Range Slider شريط السحب الموحد
- كلاس قياسي في بوتستراب 5 يوحّد مظهر مسار ومقبض عنصر <input type="range"> عبر مختلف المتصفحات.
- للمراجعة
- 02 Step Increment مقدار القفزة الرقمية
- سمة تحدد الفارق الرقمي الدقيق بين كل نقطة توقف وأخرى على طول شريط النطاق.
- للمراجعة
- 03 Semantic Output Element عنصر النتيجة الدلالي
- وسم HTML5 قياسي يرتبط بالحقل عبر سمة for لعرض القيمة المتغيرة لحظياً بطريقة متاحة.
- للمراجعة
- 04 Continuous Input Event حدث الإدخال اللحظي
- حدث برمجي ينطلق فور كل حركة لمقبض السحب دون انتظار إفلات زر الفأرة كما يفعل حدث change.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- واجهة المستخدم — تصبح أكثر وضوحاً عند إرفاق شريط السحب بعنصر <output> يظهر الرقم الدقيق أثناء التحريك.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — يجعل القيمة الصغرى لشريط السحب تبدأ من اليمين وتتزايد باتجاه اليسار بشكل فطري في العربية.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- نموذج كائن المستند — يطلق أحداث input اللحظية لقراءة خاصية value وتحديث الواجهة مباشرة.
- للمراجعة
- 04 HTML5 HTML5
- HyperText Markup Language 5
- الجيل الخامس من لغة توصيف النص الفائق — قدّمت عنصر شريط النطاق <input type="range"> وعنصر عرض المخرجات الدلالي <output>.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حقل .form-range بالسمات min="0" وmax="1" وstep="0.1" وvalue="0.8" يحدّث عنصر <output> مرافقاً عند حدث input.
-
صمّم شريط .form-range نشطاً (من 50 إلى 500 بقفزة 50) مع تسميتَي البداية والنهاية، يليه شريط .form-range ثانٍ معطّل بسمة disabled.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.