Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Опсег

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

Преглед

Креирајте сопствени <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и max0и 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;