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

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

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

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

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

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

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

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

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

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

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