<input type="range">
====================

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

Интерактивный пример
--------------------

Если используемый браузер не поддерживает тип `range`, он будет отображаться как input`text (en-US).`

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

### Валидация

Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки

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

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


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


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

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

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

### `list`

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

### `max`

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

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

### `min`

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

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

**Примечание:** Если значения `min` и `max` равны или `max` меньше `min`, то у пользователя не будет возможности взаимодействовать с диапазоном.

### `step`

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

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

**Примечание:** Когда введённые пользователем данные не соответствуют пошаговой конфигурации, агент пользователя может использовать округление до ближайшего допустимого значения, предпочитая числа в положительном направлении, когда есть два одинаково близких варианта.

По умолчанию размер шага для полей ввода `range` равен 1, что допускает ввод только целых чисел, пока размер шага является целым числом. Например, если установить `min` в -10, а `value` в 1.5, то `step` равный 1 будет допускать только такие значения, как 1.5, 2.5, 3.5,… больше нуля и -0.5, -1.5, -2.5,… меньше нуля. Смотрите также HTML-атрибут `step` (en-US).

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

| Attribute | Description |
| --- | --- |
| `orient` | Устанавливает ориентацию слайдера. **Firefox only.** |

`orient` 
Non-standard

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


**Примечание:** Note: Следующие атрибуты не применимы: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, и `width`. Каждый из них будет проигнорирован в случае употребления.

Examples
--------

Пока тип `number` позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом `range` позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.

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

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

Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает "установить громкости наполовину максимума" вместо "установить громкость на 0.5".

### Указание минимума и максимума

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

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


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

### Настройка детализации значения

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


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


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


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


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

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

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

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

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

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

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

| HTML | Screenshot |
| --- | --- |
| 
```html
<input type="range">
```
 | Screenshot of a plain slider control on macOS |

##### Контроллер диапазона с хэш-метками

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


| HTML | Screenshot |
| --- | --- |
| 
```html
<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 |
| --- | --- |
| 
```html
<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`, тем самым скрывая лейблы.

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

По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox Firefox bug 981916, Chrome bug 341071). также, возможно, следующий баг под вопросом.

В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки `appearance` для `slider-vertical`, использование нестандартной ориентации `orient` в Firefox,или изменение text direction для Internet Explorer и Edge

Рассмотрим контроллер диапазона:


```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).

### Standards

Следуя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:

#### CSS


```css
#volume {
  height: 150px;
  width: 50px;
}
```


#### HTML


```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```


#### Результат

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

### transform: rotate(-90deg)

Но вы, всё же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя `transform` для поворота элемента на 90 градусов. Посмотрим:

#### HTML

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


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


#### CSS

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


```css
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
```


Затем информация о стиле элемента `<input>` в зарезервированном пространстве:


```css
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
```


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

| Screenshot | Live sample |
| --- | --- |
|  |  |

### appearance property

Свойство `appearance` имеет нестандартное значение `slider-vertical` , которое делает слайдер вертикальным.

#### HTML

Используем тот же HTML что и в предыдущем примере:


```html
<input type="range" min="0" max="11" value="7" step="1" />
```


#### CSS

Берём только те инпуты что имеют тип range:


```css
input[type="range"] {
  -webkit-appearance: slider-vertical;
}
```

### orient attribute

В Firefox, реализовано нестандартное свойство `orient`.

#### HTML

Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением `vertical`:


```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```

### writing-mode: bt-lr

Свойство `writing-mode` может быть использовано для специальных эффектов

#### HTML

Используем тот же HTML что и в предыдущем примере:


```html
<input type="range" min="0" max="11" value="7" step="1" />
```


#### CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на `bt-lr`, или bottom-to-top и left-to-right:


```css
input[type="range"] {
  writing-mode: bt-lr;
}
```

### Все вместе

Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:

#### HTML

Оставим `orient` атрибут со значением `vertical` для Firefox:


```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```


#### CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на `bt-lr`, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем `-webkit-appearance: slider-vertical` для всех -webkit-based браузеров:


```css
input[type="range"] {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
```

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

| Specification |
| --- |
| HTML Standard # range-state-(type=range) |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* HTML Forms
* `<input>` и интерфейс `HTMLInputElement` (en-US), на котором он основан
* `<input type="number">`
* `validityState.rangeOverflow` и`validityState.rangeUnderflow`
* Controlling multiple parameters with ConstantSourceNode (en-US)
* Styling the range element
* Compatibility of CSS properties (en-US)