شريط التمرير المنزلق Type Range | الحقول الاختيارية في HTML Form

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتيح شريط التمرير <input type="range"> للمستخدم تحديد قيمة رقمية بين حدين معلومين في الحالات التي تكون فيها السرعة والسهولة أهم من كتابة الأرقام الحرفية، مثل شدة الصوت ودرجة السطوع ومستويات التقييم.

الصف 2 كود برمجي

HTML

<!-- Range slider bound to dynamic output element -->
<form action="/settings" method="post">
  <label for="vol-ctrl">Master Volume:</label>
  <input id="vol-ctrl" name="volume" type="range"
         min="0" max="100" step="5" value="70"
         oninput="volOut.value = this.value + '%'">
  <output id="volOut" for="vol-ctrl">70%</output>
</form>

جرّب بنفسك

الصف 3 صورة توضيحية

التشريح المعماري لشريط التمرير Range ومنتقي الألوان Color

الصف 4 شرح توضيحي

نظراً لأن شريط التمرير الافتراضي لا يُظهر الرقم المختار صراحة في واجهته، فإن ربطه بعنصر الإخراج الدلالي <output> عبر أحداث التفاعل يضمن وضوح القيمة المختارة للمستخدمين وقارئات الشاشة.

الصف 5 ملاحظة هامة

Slider Controls With Type Range شريط التمرير المنزلق Type Range

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الحقول الاختيارية في HTML Form)