دامنه

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

در این صفحه

بررسی اجمالی

<input type="range">ایجاد کنترل های سفارشی .form-rangeبا آهنگ (پس زمینه) و انگشت شست (مقدار) هر دو به گونه ای طراحی شده اند که در مرورگرها یکسان ظاهر شوند. از آنجایی که فقط فایرفاکس از "پر کردن" مسیر خود از سمت چپ یا راست انگشت شست به عنوان وسیله ای برای نشان دادن بصری پیشرفت پشتیبانی می کند، ما در حال حاضر از آن پشتیبانی نمی کنیم.

محدوده نمونه

html

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

معلول

ویژگی Boolean را روی ورودی اضافه disabledکنید تا ظاهری خاکستری به آن بدهید، رویدادهای اشاره گر را حذف کنید و از فوکوس جلوگیری کنید.

محدوده غیرفعال شده

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

حداقل و حداکثر

ورودی های محدوده دارای مقادیر ضمنی برای minو max— 0و 100هستند. شما می توانید مقادیر جدیدی را برای کسانی که از ویژگی های minand استفاده می کنند تعیین کنید max.

محدوده نمونه

html

<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".

محدوده نمونه

html

<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;