آموزش Input Type : Range

آموزش Input Type : Range

کنترل اسلایدر یک یوزر اینترفیس (user interface) بسیار شهودی برای تنظیم یک عدد در یک دامنه می باشد. یک نمونه اسلایدر معمولا در انتخاب گر رنگ (color picker) یافت می شود، جایی که می توانیم پیکان را به سمت راست یا چپ درگ کرده و مقدار RGB درست را انتخاب کنیم.

قبلا برای ایجاد اسلایدر در صفحه ی وب بین جاوا اسکریپت یا فلش یکی را به عنوان راه حل انتخاب می کردیم. HTML5 برای ذخیره ی هزاران بایت در کد شما اینجاست. با نوع جدید ورودی، کنترل اسلایدر
(‎<input type="range">‎) مانند لیست dropdown خواهد بود.
کد آن به سادگی زیر می باشد.

                      <input id="test" type="range" />‎  

طبق معمول طراحان هر مرورگر در اجرای یوزر اینترفیس سلیقه ی مربوط به خود را دارند. مجداد تمایل دارم به شما یک گالری از اسلایدهای متنوعی نشان دهم که مرورگرهای مختلف در ویندوزها اجرا می کنند.

مرورگرها ‎<input type="range">‎‏ ‏را اجرا نمی کنند، طوریکه اسلایدر به سادگی آن را مانند یک تکست باکس ساده اجرا خواهد کر.
در نگارش مرورگرهایی که ‎<input type="range">‎ را مانند اسلایدر اجرا می کنند در جدول زیر ارائه شده اند.

نوع دامنه دارای ویژگی های جالبی است که شاید تمایل داشته باشید یاد بگیرید:

همیشه درک این مطالب در نمایش آسانتر می باشد.
اجازه دهید بیشترین مقدار، کمترین مقدارو استپ فاکتور را مشخص کنیم.

                          ‎<input id="slider1" type="range" min="100" max="500" step="10" />‎  

تنظیم مقدار پیش فرض

                          ‎<input id="slider2" type="range" min="100" max="500" step="50" value="100" />‎  

کار آن با اعداد ممیزی

                      <input id="slider3" type="range" min="-2.5" max="3.0" step="0.1" />