Аралыгы
Эзлекле кросс-браузерны стилизацияләү һәм урнаштырылган көйләү өчен безнең махсус диапазон керемнәрен кулланыгыз.
Гомуми күзәтү
<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;