رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

دامنه

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

بررسی اجمالی

<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و max0و 100هستند. شما می توانید مقادیر جدیدی را برای کسانی که از ویژگی های minand استفاده می کنند تعیین کنید 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;