HTMLنطاقات الإختيار
- مفهوم نطاق الإختيار
- إضافة نطاق إختيار
مفهوم نطاق الإختيار
نطاق الإختيار ( Range ) عبارة عن شريط مخصص لاختيار قيم رقمية ضمن نطاق محدد مثلاً من 0 إلى 100.
هذا الشريط يكون عليه زر يمكن تحريكه لاختيار قيمة.
إضافة نطاق إختيار
لإضافة نطاق إختيار يمكنك استخدام الوسم <input> على هذا النحو <input type="range">.
يمكنك إضافة الخصائص التالية لهذا الوسم:
- id نضيفها له في حال أردنا ربطه بوسم <label>.
- name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
- value لإعطائه قيمة أولية.
- min لتحديد أصغر قيمة فيه.
- max لتحديد أكبر قيمة فيه.
- step لتحديد كم ستزيد قيمته كلما تم إزاحته.
- disabled لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.
في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0
و 20
و قيمته الإفتراضية هي 10
.
المثال الأول
في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0
و 20
و قيمته الإفتراضية هي 10
.
بالإضافة لذلك جعلنا قيمته تزيد أو تقل بمقدار 5
وحدات كلما تم تحريكه.
المثال الثاني
في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0
و 20
و قيمته الإفتراضية هي 7
.
هنا قمنا بجعل النطاق غير مفعّل و بالتالي لا يمكن تغيير قيمته.