<input type="range">

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

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

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

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

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

Атрибут value содержит строку, представляющую строковое представление выбранного числа. Значение никогда не является пустой строкой (""). Значение по умолчанию находится посередине между заданным минимумом и максимумом — если максимум фактически меньше минимума, в этом случае значение по умолчанию устанавливается в значение атрибута min. Алгоритм определения значения по умолчанию:

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

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

В дополнение к атрибутам, общим для всех элементов <input>, элементы ввода типа range предлагают следующие атрибуты.

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

См. раздел Добавление отметок ниже, чтобы узнать, как обозначены варианты на ползунке в поддерживаемых браузерах.

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

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

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

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

Атрибут step — это число, которое задаёт точность, которой должно соответствовать значение. Только значения, которые соответствуют заданному шагу (min, если указано, value в противном случае или соответствующее значение по умолчанию, если ни то, ни другое не указано), являются допустимыми.

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

Значение шага по умолчанию для элементов ввода типа range равно 1, позволяя вводить только целые числа, за исключением случаев, когда база шага не является целым числом; например, если вы установите min в -10 и value в 1,5, то значение step 1 позволит только значения, такие как 1,5, 2,5, 3,5,… в положительном направлении и -0,5, -1,5, -2,5,… в отрицательном направлении. См. атрибут HTML step.

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

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

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

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

Как правило, если пользователь, скорее всего, заинтересован в проценте расстояния между минимальным и максимальным значениями, чем в фактическом числе, элемент ввода типа 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:

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> для нескольких элементов <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;
}

Это приводит к вертикальному отображению ползунка диапазона:

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

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

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