مفهوم نطاق الإختيار
نطاق الإختيار ( Range ) عبارة عن شريط مخصص لاختيار قيم رقمية ضمن نطاق محدد مثلاً من 0 إلى 100.
هذا الشريط يكون عليه زر يمكن تحريكه لاختيار قيمة.
نطاق الإختيار ( 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>