Диапазон

Браузерди ырааттуу стилдештирүү жана орнотулган ыңгайлаштыруу үчүн ыңгайлаштырылган диапазонубузду колдонуңуз.

Бул бетте

Обзор

менен ыңгайлаштырылган <input type="range">башкаруу элементтерин түзүңүз .form-range. Трек (фон) жана баш бармак (маани) экөө тең браузерлерде бирдей көрүнүш үчүн стилделет. Прогрессти визуалдык көрсөтүү үчүн Firefox гана алардын тректерин сол же оң тарабынан "толтурууну" колдогондуктан, биз учурда аны колдобойбуз.

Мисал диапазон

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

Өчүрүлгөн

disabledКиргизилген көрүнүшкө боз түс берүү жана көрсөткүч окуяларын алып салуу үчүн логикалык атрибутун кошуңуз .

Өчүрүлгөн диапазон

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

Мин жана макс

minДиапазон киргизүүлөрү тиешелүүлүгүнө жараша жана max- 0жана үчүн ачык маанилерге ээ 100. minСиз жана maxатрибуттарын колдонгондор үчүн жаңы маанилерди көрсөтсөңүз болот .

Мисал диапазон

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Кадамдар

Демейки боюнча, диапазон бүтүн сандын маанилерине "чап" киргизет. Муну өзгөртүү үчүн, сиз stepмаанини көрсөтсөңүз болот. Төмөндөгү мисалда биз кадамдарды колдонуу менен эки эсеге көбөйтөбүз 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">

Sass

Өзгөрмөлөр

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