محدوده (Range)
«محدوده بوت استرپ» یک ورودی کشویی است. محدوده (Range) یعنی اسلایدری برای انتخاب عدد. با کلاس .form-range ظاهرش زیبا می شود. مثل ولوم صدا در گوشی.
محدوده سفارشی با .form-range
برای استایل دهی، نوع ورودی را range بگذار و کلاس .form-range بده.
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange" name="points">
گام ها و فاصله ها با step
ویژگی step می گوید با هر حرکت، عدد چقدر تغییر کند. مثل پرش های ده تایی.
<input type="range" class="form-range" id="stepRange" name="points1" step="10">
حداقل و حداکثر با min و max
پیش فرض، بازه 0 تا 100 است. با min و max آن را محدود کن.
<input type="range" class="form-range" id="rangeBounded" name="points2" min="0" max="4">
گام های عملی
- یک برچسب کوتاه برای ورودی بنویس.
- ورودی را
type="range"بگذار و کلاس بده. - درصورت نیاز،
stepوminوmaxتنظیم کن.
نکته: برای دسترس پذیری، از برچسب با for استفاده کن.
جمع بندی سریع
.form-rangeاسلایدر را زیبا می کند.stepاندازه هر پرش را تعیین می کند.minوmaxمرزهای بازه هستند.- برچسب درست، کاربر را راهنمایی می کند.
مطالب مرتبط: چک باکس و رادیو، فرم ها (Forms)، ورودی گروهی.