Меню ProgrammerBook.ru
ProgrammerBook.ru
/html/input/type/range:> Ползунок_

Значение range

Синтаксис

HTML
<input type="range">

Описание

Тип range (от англ. "range" ‒ «диапазон, спектр») создаёт ползунок.

Внешний вид

  • Внешний вид ползунка ‒ ползунок;
  • Внешний вид ползунка с фокусом ‒ фокус;
  • Внешний вид ползунка с наведённым на него курсором ‒ наведение курсора.

Примечание

В большинстве браузеров по умолчанию ручка ползунка всегда находится посередине.

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

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

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

Верс. Раздел
HTML
2.0 Input Field: INPUT
3.2 INPUT text fields, radio buttons, check boxes, ...
4.01 17.4.1 Control types created with INPUT
5.0 4.10.5.1.10 Range state (type=range)
5.1 4.10.5.1.13. Range state (type=range)
XHTML
1.0 Extensible HyperText Markup Language
1.1 Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete
Автозаполнение значения (положения) ползунка.
autofocus
Автоматческая фокусировка на ползунке после полной загрузки страницы.
disabled
Блокировка ползунка.

Внешний вид заблокированного ползунка disabled="disabled"

form
Присоединение ползунка к форме.
list
Создание дополнительных меток на шкале ползунка.

Внешний вид ползунка с дополнительными метками

max
Указывает, максимальное значение ползунка.

Значение по умолчанию: «100».

min
Указывает, минимальное значение ползунка.

Значение по умолчанию: «0».

name
Присваивает имя ползунку.
step
Устанавливает интервал увеличения значения (перемещения) ползунка.

Значение по умолчанию: «1».

value
Указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

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

Внешний вид ползунка с заданным значением min="0" max="10" value="8"

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение range (input-type)</title>
</head>
<body>
<h1>Пример с ползунком "type=range"</h1>
<fieldset> <legend>Передвиньте ползунок</legend>
<p><input type="range" min="0" max="10" onchange="document.getElementById('rangeValue').innerHTML = this.value;" list="rangeList"> <span id="rangeValue">5</span></p>
<datalist id="rangeList">
<option value="0" label="0">
<option value="2" label="2">
<option value="4" label="4">
<option value="6" label="6">
<option value="8" label="8">
<option value="10" label="10">
</datalist>
</fieldset>
</body>
</html>
Значение range (input-type)