دامنه
از ورودیهای محدوده سفارشی ما برای استایل متقابل مرورگر و سفارشیسازی داخلی استفاده کنید.
بررسی اجمالی
<input type="range">
ایجاد کنترل های سفارشی .form-range
با آهنگ (پس زمینه) و انگشت شست (مقدار) هر دو به گونه ای طراحی شده اند که در مرورگرها یکسان ظاهر شوند. از آنجایی که فقط فایرفاکس از "پر کردن" مسیر خود از سمت چپ یا راست انگشت شست به عنوان وسیله ای برای نشان دادن بصری پیشرفت پشتیبانی می کند، ما در حال حاضر از آن پشتیبانی نمی کنیم.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
معلول
ویژگی Boolean را روی ورودی اضافه disabled
کنید تا ظاهری خاکستری به آن بدهید و رویدادهای اشاره گر را حذف کنید.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
حداقل و حداکثر
ورودی های محدوده دارای مقادیر ضمنی برای min
و max
— 0
و 100
هستند. شما می توانید مقادیر جدیدی را برای کسانی که از ویژگی های min
and استفاده می کنند تعیین کنید max
.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
مراحل
به طور پیش فرض، محدوده ورودی "snap" را به مقادیر صحیح وارد می کند. برای تغییر این می توانید step
مقداری را مشخص کنید. در مثال زیر تعداد مراحل را با استفاده از 2 برابر می کنیم step="0.5"
.
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
ساس
متغیرها
$form-range-track-width: 100%;
$form-range-track-height: .5rem;
$form-range-track-cursor: pointer;
$form-range-track-bg: $gray-300;
$form-range-track-border-radius: 1rem;
$form-range-track-box-shadow: $box-shadow-inset;
$form-range-thumb-width: 1rem;
$form-range-thumb-height: $form-range-thumb-width;
$form-range-thumb-bg: $component-active-bg;
$form-range-thumb-border: 0;
$form-range-thumb-border-radius: 1rem;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg: $gray-500;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;