HTML نطاقات الإختيار

مفهوم نطاق الإختيار

نطاق الإختيار ( Range ) عبارة عن شريط مخصص لاختيار قيم رقمية ضمن نطاق محدد مثلاً من 0 إلى 100.
هذا الشريط يكون عليه زر يمكن تحريكه لاختيار قيمة.

إضافة نطاق إختيار

لإضافة نطاق إختيار يمكنك استخدام الوسم <input> على هذا النحو <input type="range">.

يمكنك إضافة الخصائص التالية لهذا الوسم:

• id نضيفها له في حال أردنا ربطه بوسم <label>.
• name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
• value لإعطائه قيمة أولية.
• min لتحديد أصغر قيمة فيه.
• max لتحديد أكبر قيمة فيه.
• step لتحديد كم ستزيد قيمته كلما تم إزاحته.
• disabled لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.

في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0 و 20 و قيمته الإفتراضية هي 10.

<label for="volume">Volume between (0 and 20):</label>
<input type="range" id="volume" name="volume" min="0" max="20" step="1" value="10">
		

جرب الكود

في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0 و 20 و قيمته الإفتراضية هي 10.
بالإضافة لذلك جعلنا قيمته تزيد أو تقل بمقدار 5 وحدات كلما تم تحريكه.

<label for="volume">Volume between (0 and 20):</label>
<input type="range" id="volume" name="volume" min="0" max="20" step="5" value="10">
		

جرب الكود

في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0 و 20 و قيمته الإفتراضية هي 7.
هنا قمنا بجعل النطاق غير مفعّل و بالتالي لا يمكن تغيير قيمته.

<label for="volume">Volume between (0 and 20):</label>
<input type="range" id="volume" name="volume" min="0" max="20" step="1" value="7" disabled>
		

جرب الكود