Төп эчтәлеккә күчү Документлар навигациясенә күчү
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һәм 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">

Сасс

Variзгәрешләр

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