Диапазон
Браузерди ырааттуу стилдештирүү жана орнотулган ыңгайлаштыруу үчүн ыңгайлаштырылган диапазонубузду колдонуңуз.
Обзор
менен ыңгайлаштырылган <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;