Опсег
Користете ги нашите приспособени влезови за опсег за доследен стил на прелистувачи и вградено прилагодување.
Преглед
Креирајте сопствени <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">
Чекори
Стандардно, опсегот внесува „snap“ на цели броеви. За да го промените ова, можете да наведете 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">
Сас
Променливи
$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;