<input type="range"> HTML: значение атрибута

Элементы <input> типа range позволяют пользователю указать числовое значение, которое должно быть не меньше заданного минимума и не больше заданного максимума. Однако точное значение не считается важным. Обычно для этого используется ползунок или регулятор, а не поле для ввода текста, как у поля типа number.

Поскольку такой элемент управления не обеспечивает точного выбора, его следует использовать только в том случае, если точное значение не имеет значения.

Попробуйте

<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input
    type="range"
    id="cowbell"
    name="cowbell"
    min="0"
    max="100"
    value="90"
    step="10" />
  <label for="cowbell">Cowbell</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Если браузер пользователя не поддерживает тип range, он вернётся к типу поля ввода text.

Значение

Значение элемента <input type="range"> задаётся с помощью атрибута value, который принимает строку, представляющую выбранное число. Значение никогда не бывает пустой строкой (""). По умолчанию устанавливается значение посередине между заданными минимумом и максимумом — если только максимум не меньше минимума; в этом случае значением по умолчанию становится значение атрибута min. Алгоритм определения значения по умолчанию:

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

Если попытаться установить значение ниже минимума, оно будет установлено на уровне минимума. Аналогично, при попытке установить значение выше максимума оно будет установлено на уровне максимума.

Валидация

Проверка по шаблону недоступна, однако выполняются следующие виды автоматической проверки:

• Если value задано значением, которое нельзя преобразовать в допустимое число с плавающей запятой, проверка завершается неудачей, поскольку поле содержит некорректные данные.
• Значение не может быть меньше min. По умолчанию это 0.
• Значение не может быть больше max. По умолчанию это 100.
• Значение должно быть кратно step. По умолчанию это 1.

Дополнительные атрибуты

Помимо атрибутов, общих для всех элементов <input>, поля ввода диапазона поддерживают следующие атрибуты.

list

Значение атрибута list — это id элемента <datalist>, расположенного в том же документе. Элемент <datalist> предоставляет список предварительно заданных значений, которые можно предложить пользователю для этого поля. Значения списка, несовместимые с type, не включаются в предлагаемые варианты. Указанные значения являются рекомендациями, а не требованиями: пользователь может выбрать значение из предварительно заданного списка или указать другое.

Пример отображения вариантов диапазона в поддерживаемых браузерах см. ниже в разделе «Добавление делений».

max

Наибольшее значение в допустимом диапазоне. Если значение value, введённое в элемент, превышает это значение, элемент не проходит проверку ограничений. Если значение атрибута max не является числом, у элемента нет максимального значения.

Это значение должно быть больше значения атрибута min или равно ему. См. атрибут HTML max.

min

Наименьшее значение в допустимом диапазоне. Если значение элемента value меньше этого значения, элемент не проходит проверку ограничений. Если для min указано значение, не являющееся допустимым числом, у поля ввода нет минимального значения.

Это значение должно быть меньше значения атрибута max или равно ему. См. атрибут HTML min.

step

Атрибут step — это число, задающее шаг изменения значения, либо специальное значение any, описанное ниже. Допустимы только значения, отстоящие от базового значения шага на целое число шагов. Базовым значением шага является min, если он задан; в противном случае — value; если не задано ни одно из них — 0.

Значение шага по умолчанию для полей ввода step равно 1, поэтому можно вводить только целые числа, — если только базовое значение шага не является целым числом.

Строковое значение any означает, что шаг не задан и разрешено любое значение (с учётом других ограничений, таких как min и max). Пример работы этого параметра в поддерживаемых браузерах см. в разделе «Установка для шага значения any».

Нестандартные атрибуты

orient

Подобно нестандартному свойству CSS -moz-orient, которое влияет на элементы <progress> и <meter>, атрибут orient задаёт ориентацию ползунка диапазона. Возможные значения: horizontal — диапазон отображается горизонтально, и vertical — диапазон отображается вертикально.

Примеры

Поле типа number позволяет пользователям вводить число с необязательными ограничениями, задающими минимальное и максимальное значение, однако при этом пользователь должен указать конкретное значение. Поле типа range позволяет запросить значение в случаях, когда пользователь может не знать или не считать важным точное выбранное числовое значение.

Вот несколько примеров ситуаций, в которых часто используются поля ввода диапазона:

• Аудионастройки, например громкость и баланс, или настройки фильтров.
• Настройки цвета, например цветовые каналы, прозрачность, яркость и т. д.
• Настройки игры, например сложность, дальность видимости, размер мира и так далее.
• Длина пароля, генерируемого менеджером паролей.

Как правило, поле ввода диапазона хорошо подходит в тех случаях, когда пользователя больше интересует процентное соотношение между минимумом и максимумом, чем само числовое значение. Например, регулируя громкость домашней стереосистемы, пользователь обычно думает «установить громкость на половину от максимума», а не «установить громкость на 0,5».

Задание минимума и максимума

По умолчанию минимум равен 0, а максимум — 100. Если вам нужны другие значения, можно задать границы, изменив значения атрибутов min и/или max. Это могут быть любые числа с плавающей запятой.

Например, чтобы запросить у пользователя значение от -10 до 10, можно использовать:

<input type="range" min="-10" max="10" />

Задание точности значения

По умолчанию шаг равен 1, то есть значение всегда является целым числом. Чтобы задать шаг, измените атрибут step. Например, если нужно значение, находящееся посередине между 5 и 10, задайте для step значение 0.5:

Задание атрибута step

<input type="range" min="5" max="10" step="0.5" />

Установка для step значения any

Если нужно принимать любые значения независимо от количества знаков после запятой, можно задать атрибуту step значение any:

HTML

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>

JavaScript

const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

В этом примере пользователь может выбрать любое значение от 0 до π без ограничений на дробную часть. JavaScript используется для отображения изменения значения при взаимодействии пользователя с диапазоном.

Добавление делений

Чтобы добавить деления к элементу управления диапазоном, укажите атрибут list со значением id элемента <datalist>, который задаёт набор делений на элементе управления. Каждая точка задаётся элементом <option>, у атрибута value которого указано значение диапазона, в месте которого нужно нарисовать деление.

HTML

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Результат

Использование одного datalist для нескольких элементов управления диапазоном

Чтобы не дублировать код, можно повторно использовать один и тот же элемент <datalist> для нескольких элементов <input type="range"> и других типов элементов <input>.

HTML

<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

Результат

Добавление подписей

Делениям можно задать подписи, указав атрибуты label у элементов <option>. Однако по умолчанию текст подписей не отображается. С помощью CSS можно показать подписи и задать их правильное положение. Например, это можно сделать так.

HTML

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

CSS

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}

Результат

Создание вертикальных элементов управления диапазоном

По умолчанию браузеры отображают поля ввода диапазона в виде ползунков с ручкой, перемещающейся влево и вправо.

Чтобы создать вертикальный диапазон, в котором бегунок перемещается вверх и вниз, задайте свойству writing-mode значение vertical-rl или vertical-lr:

input[type="range"] {
  writing-mode: vertical-lr;
}

В результате ползунок диапазона будет отображаться вертикально:

Чтобы обеспечить поддержку старых версий Chrome и Safari, можно также задать свойству CSS appearance нестандартное значение slider-vertical. Для поддержки старых версий Firefox добавьте нестандартный атрибут orient="vertical".

Примеры см. в разделе Создание вертикальных элементов управления формы.

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• HTML-формы
• <input> и лежащий в его основе интерфейс HTMLInputElement
• <input type="number">
• validityState.rangeOverflow и validityState.rangeUnderflow
• Управление несколькими параметрами с помощью ConstantSourceNode
• Создание вертикальных элементов управления формы
• Стилизация элемента range