شرح صفوف ومحتوى الفقرة
لا يعرض متصفح الويب الرقم المحدد فوق شريط السحب من تلقاء نفسه؛ لذلك فإن ترك المستخدم يسحب .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» لإلحاق الرموز والنصوص والأزرار مباشرة قبل الحقول أو بعدها.