انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
محدوده پایه
سفارشی ایجاد کنید <input type="range"> کنترل با .form-range. آهنگ (پس زمینه) و انگشت شست (مقدار) هر دو به گونه ای طراحی شده اند که در مرورگرها یکسان ظاهر شوند. از آنجایی که فقط فایرفاکس از "پر کردن" مسیر خود از سمت چپ یا راست انگشت شست به عنوان وسیله ای برای نشان دادن بصری پیشرفت پشتیبانی می کند، ما در حال حاضر از آن پشتیبانی نمی کنیم.
<input type="range" class="form-range">محدوده غیر فعال
را اضافه کنید از کار افتاده است مشخصه بولی در ورودی برای دادن ظاهری خاکستری به آن، حذف رویدادهای اشاره گر و جلوگیری از تمرکز.
<input type="range" class="form-range" disabled>حداقل و حداکثر
ورودی های محدوده دارای مقادیر ضمنی برای هستند دقیقه و حداکثر - 0 و 100به ترتیب. شما می توانید مقادیر جدیدی را برای کسانی که از آن استفاده می کنند تعیین کنید دقیقه و حداکثر صفات
<input type="range" class="form-range" min="0" max="5">مراحل
به طور پیش فرض، محدوده ورودی "snap" را به مقادیر صحیح وارد می کند. برای تغییر این می توانید a را مشخص کنید گام ارزش در مثال زیر تعداد مراحل را با استفاده دو برابر می کنیم step="0.5".
<input type="range" class="form-range" min="0" max="5" step="0.5">محدوده رنگ ها
<div class="row g-4">
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-primary" min="0" max="5" step="0.2">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-secondary" min="0" max="5" step="0.1">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-success" min="0" max="5" step="0.3">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-warning" min="0" max="5" step="0.9">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-info" min="0" max="5" step="3">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-danger" min="0" max="5" step="2">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-dark" min="0" max="5" step="4">
</div><!--End col-->
<div class="col-12 col-xl-6">
<input type="range" class="form-range form-range-light" min="0" max="5" step="2">
</div><!--End col-->
</div><!--End row-->پلاگین های Nouislider:
لغزنده پیش فرض
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
اسلایدر غیرفعال است
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده عمودی
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده دو دسته
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده حاشیه
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
حداقل :
حداکثر :
اسلایدر مرحله ای
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده RTL
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
حداکثر :
نوار لغزنده راهنمای ابزار
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
نوار لغزنده محدوده چندگانه
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
حداکثر : 20.00
Slider Fit Style
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده گرد
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
اسلایدر مربعی
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
اندازه های لغزنده
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده حد نرم
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده ثانویه
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
اسلایدر موفقیت
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
اسلایدر موفقیت
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
نوار لغزنده هشدار
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده خطر
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید:
لغزنده تاریک
برای وارد کردن تاریخ از فیلدهای زیر استفاده کنید. لطفاً فرمت مشخص شده برای هر فیلد را دنبال کنید: