Диапазон
Используйте наши пользовательские поля ввода диапазона для согласованной кросс-браузерной стилизации и встроенной настройки.
Обзор
Создавайте пользовательские элементы управления <input type="range">
с .form-range
. Дорожка (фон) и бегунок (значение) оба стилизованы так, чтобы выглядеть одинаково в разных браузерах. Поскольку только Firefox поддерживает "заполнение" своей дорожки слева или справа от бегунка как способ визуально обозначить прогресс, мы в настоящее время это не поддерживаем.
<label for="range1" class="form-label">Пример диапазона</label>
<input type="range" class="form-range" id="range1">
Отключено
Добавьте булев атрибут disabled
к полю ввода, чтобы придать ему серый вид, удалить события указателя и предотвратить фокусировку.
<label for="disabledRange" class="form-label">Отключенный диапазон</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Минимум и максимум
Поля ввода диапазона имеют неявные значения для min
и max
— 0
и 100
соответственно. Вы можете указать новые значения для них, используя атрибуты min
и max
.
<label for="range2" class="form-label">Пример диапазона</label>
<input type="range" class="form-range" min="0" max="5" id="range2">
Шаги
По умолчанию поля ввода диапазона "привязываются" к целым значениям. Чтобы изменить это, вы можете указать значение step
. В примере ниже мы удваиваем количество шагов, используя step="0.5"
.
<label for="range3" class="form-label">Пример диапазона</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="range3">
Вывод значения
Значение поля ввода диапазона может быть показано с помощью элемента output
и небольшого количества JavaScript.
<label for="range4" class="form-label">Пример диапазона</label>
<input type="range" class="form-range" min="0" max="100" value="50" id="range4">
<output for="range4" id="rangeValue" aria-hidden="true"></output>
<script>
// Это пример скрипта, пожалуйста, измените по необходимости
const rangeInput = document.getElementById('range4');
const rangeOutput = document.getElementById('rangeValue');
// Установить начальное значение
rangeOutput.textContent = rangeInput.value;
rangeInput.addEventListener('input', function() {
rangeOutput.textContent = this.value;
});
</script>
CSS
Sass переменные
$form-range-track-width: 100%;
$form-range-track-height: .5rem;
$form-range-track-cursor: pointer;
$form-range-track-bg: var(--#{$prefix}secondary-bg);
$form-range-track-border-radius: 1rem;
$form-range-track-box-shadow: var(--#{$prefix}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: var(--#{$prefix}secondary-color);
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;