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

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

Если используемый браузер не поддерживает тип range, он будет отображаться как inputtext.

Value DOMString, содержащий строковое представление выбранного числового значения; используйте valueAsNumber чтобы получить значение Number.
События change и input
Поддерживаемые общие атрибуты autocomplete, list, max, min, and step
IDL атрибуты list, value, и valueAsNumber
Методы stepDown() и stepUp()

Значение

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

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

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

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

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

Атрибут Описание
max Максимальное допустимое значение
min Минимальное допустимое значение
step Шаговый интервал, используемый для пользовательского интерфейса и для проверки

max

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

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

min

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

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

step

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

По умолчанию шаг для инпута с типом range равен 1, допустим ввод только целых чисел, если  база шага не является целым; например, если вы установили min на -10 и value на 1.5, то step  1 позволит только такие значения как 1.5, 2.5, 3.5,... в положительном направлении и -0.5, -1.5, -2.5,... в отрицательном направлении.

Использование range инпутов

Пока тип 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.01:

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

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

<input type="range" min="0" max="3.14" step="any">

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

Добавление хэш-меток и лейблов

Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут list и элемент <datalist>, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

Макеты контроллера диапазона

Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.

Недекорированный контроллер даипазона

Этот результат вы получите, если не укажите атрибут list, или браузер не будет его поддерживать.

HTML Screenshot
<input type="range">
Screenshot of a plain slider control on macOS
Контроллер диапазона с хэш-метками

Контроллер диапазона, использующий атрибут list, указывающий ID <datalist>, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента <option> с его набором value значений диапазона, при котором должна быть нарисована метка.

HTML Screenshot
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100">
</datalist>
Screenshot of a plain slider control on macOS
Контроллер диапазона с хэш-метками и лейблами

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

HTML Screenshot
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>
Screenshot of a plain slider control on macOS

Примечание: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддрживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг <datalist> должен быть стилизован с помощью  CSS, так как его свойство display по умолчанию -  none, тем самым скрывая лейблы.

Изменение ориентации

Спецификация HTML рекомендует, чтобы браузеры автоматически переключались на вертикальное отображение контроллеров диапазона, если их высота больше ширины.  К сожалению, ни один из основных браузеров, в настоящее время, не поддерживает вертикальное управление контроллером диапазона. Однако, вы можете создать вертикальный контроллер диапазона, нарисовав горизонтальный контроллер на его стороне. Самый простой способ - использовать CSS: применив transformдля поворота элемента, вы можете сделать его вертикальным. Посмотрим.

HTML

В HTML нужно добавить обертку вокруг <input>  - <div>, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):

<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1">
</div>

CSS

Теперь нам нужно немного CSS. Во-первых, это CSS для самой обертки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повернутый слайдер в зарезервированном пространстве, не создавая беспорядка.

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
Затем информация о стиле элемента <input> в зарезервированном пространстве:
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на  0 и transform-origin смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поварачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.

Результат

ScreenshotLive sample

Проверка

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

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

Примеры

В дополнение к приведенным примерам, вы можете найти инпуты диапазона в статье:

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

Спецификация Статус Комментарий
HTML Living Standard
Определение '<input type="range">' в этой спецификации.
Живой стандарт Первое определение
HTML 5.1
Определение '<input type="range">' в этой спецификации.
Рекомендация Первое определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
type="range"Chrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 23IE Полная поддержка 10Opera Полная поддержка 11Safari Полная поддержка 3.1WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Нет поддержки 2 — 4.4
Замечания
Замечания Pre-Chromium Android WebView recognizes the range type, but doesn't implement a range-specific control.
Chrome Android Полная поддержка 57Firefox Android Полная поддержка 52Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android ?
Tick mark supportChrome Полная поддержка ДаEdge ? Firefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 841942.
IE ? Opera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 841942.
Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android ?
Vertically-oriented slider supportChrome Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Edge ? Firefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 840820 and bug 981916.
IE Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания The slider can be oriented vertically by setting the writing-mode: bt-lr style on the input element.
Opera Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Safari Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
WebView Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Chrome Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Firefox Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 840820 and bug 981916.
Opera Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Safari iOS Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva
Обновлялась последний раз: opereverzeva,