Аралыгы

Эзлекле кросс-браузерны стилизацияләү һәм урнаштырылган көйләү өчен безнең махсус диапазон керемнәрен кулланыгыз.

Бу биттә

Гомуми күзәтү

<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Соры төсне күрсәтү, күрсәткеч вакыйгаларын бетерү һәм игътибарны туплау өчен буле атрибутын кертүгә өстәгез .

Инвалид диапазоны

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">

Адымнар

Килешү буенча, бөтен кыйммәтләргә диапазон "снап" кертә. Моны үзгәртү өчен сез 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">

Сасс

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;