لغزنده برد
محدوده بوت استرپ
محدوده پیش فرض
استفاده کنید type="range" صفت و form-range کلاس برای ایجاد یک محدوده پیش فرض.
از کار افتاده است
استفاده کنید disabled ویژگی روی یک ورودی برای دادن ظاهری خاکستری به آن و حذف رویدادهای اشاره گر.
حداقل و حداکثر
استفاده کنید min و max ویژگی با ورودی محدوده مشخص شده به ترتیب.
مراحل
به طور پیش فرض، محدوده ورودی "snap" را به مقادیر صحیح وارد می کند. برای تغییر این، می توانید مقدار مرحله را مشخص کنید. در مثال زیر تعداد مراحل را با استفاده دو برابر می کنیم step="0.5" ویژگی
<!-- Default Range -->
<input type="range" class="form-range" id="customRange1">
<!-- Disabled Range -->
<input type="range" class="form-range" id="disabledRange" disabled>
<!-- Min and Max -->
<input type="range" class="form-range" min="0" max="5" id="customRange2">
<!-- Steps -->
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
نویزلایدر
noUiSlider یک نوار لغزنده سبک جاوا اسکریپت است
مثال پایه
دسته برد چند عنصری
رنگگیر
استفاده از عناصر ورودی HTML5
نوار لغزنده غیر خطی
قفل کردن لغزنده ها روی هم
ادغام نکات همپوشانی ابزار
فقط هنگام کشویی دستگیره نکات ابزار را نشان می دهد
حرکت نوار لغزنده با کلیک کردن بر روی pips
عناصر اتصال رنگی
ایجاد ضامن
محدودیت های نرم
طرح رنگ
اولیه
استفاده کنید data-slider-color="primary" ویژگی برای تنظیم طرح رنگ اصلی.
ثانویه
استفاده کنید data-slider-color="secondary" ویژگی برای تنظیم طرح رنگ ثانویه.
موفقیت
استفاده کنید data-slider-color="success" ویژگی به مجموعه رنگ موفقیت آمیز.
اطلاعات
استفاده کنید data-slider-color="info" ویژگی برای تنظیم طرح رنگ اطلاعات.
هشدار
استفاده کنید data-slider-color="warning" ویژگی برای تنظیم طرح رنگ هشدار.
خطر
استفاده کنید data-slider-color="danger" ویژگی برای تنظیم طرح رنگ خطر.
تاریک
استفاده کنید data-slider-color="dark" ویژگی برای تنظیم طرح رنگ تیره.
اندازه ها
بزرگ
استفاده کنید data-slider-size="lg" ویژگی برای تنظیم دامنه‌ای با اندازه بزرگ.
متوسط
استفاده کنید data-slider-size="md" ویژگی برای تنظیم محدوده داده با اندازه متوسط.
کوچک
استفاده کنید data-slider-size="sm" ویژگی برای تنظیم دامنه‌های اسلایدر اندازه کوچک.
یک ظاهر طراحی شده
لاین Rangeslider
استفاده کنید data-slider-style="line" صفت برای تنظیم محدوده اسلایدر خط.
دایره‌ای مرزدار Rangeslider
استفاده کنید data-slider-style="border" ویژگی برای تنظیم محدوده‌ای با حاشیه دایره‌ای.
Square Rangeslider
استفاده کنید data-slider-style="square" صفت برای تنظیم محدوده اسلایدر شکل مربع.