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

نطاق الإختيار ( 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>