نطاقات الإختيار أو الحجم volume
مقدمة
نطاق الإختيار عبارة عن شريط مخصص لاختيار قيم رقمية ضمن نطاق محدد مثلاً من 0 إلى 100.
هذا الشريط يكون عليه زر يمكن تحريكه لاختيار قيمة كالذي يكون في نطاق زيادة مستوى الصوت.
ولإضافة نطاق إختيار يمكنك استخدام الوسم <input> على هذا النحو <input type="range">.
إضافة الخصائص التالية لهذا الوسم:
id نضيفها له في حال أردنا ربطه بوسم <label>.
min لتحديد أصغر قيمة فيه.
max لتحديد أكبر قيمة فيه.
step لتحديد كم ستزيد قيمته كلما تم إزاحته.
name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
value لإعطائه قيمة أولية.
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 و قيمته الإفتراضية هي 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>
المثال الثالث: قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 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">
جرب الكود
ليست هناك تعليقات:
إرسال تعليق
الموسوعة العامة تحتوي على كل ما يهمك من عمل أو تحميل للأفلام أو أخبار... مجانا