Опсег

Користете ги нашите приспособени влезови за опсег за доследен стил на прелистувачи и вградено прилагодување.

На оваа страница

Преглед

Креирајте сопствени <input type="range">контроли со .form-range. Песната (заднината) и палецот (вредноста) се стилизирани да се појавуваат исто низ прелистувачите. Бидејќи само Firefox поддржува „пополнување“ на нивната песна од левата или десната страна на палецот како средство за визуелно означување на напредокот, ние во моментов не го поддржуваме.

Пример опсег

html

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

Оневозможено

Додајте го disabledатрибутот boolean на влез за да му дадете сив изглед, да ги отстраните настаните од покажувачот и да спречите фокусирање.

Оневозможен опсег

html

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

Мин и макс

Влезовите за опсег имаат имплицитни вредности за minи max— 0и 100, соодветно. Може да наведете нови вредности за оние што ги користат атрибутите minи .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вредност. Во примерот подолу, го удвојуваме бројот на чекори со користење на 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;