<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>, поля діапазону приймають наступні.

Примітка: Наступні атрибути полів не застосовуються до полів діапазону: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size і src. Усі вони, бувши заданими, ігноруються.

list

Значення атрибута list – це id елемента <datalist>, розташованого в тому самому документі. Елемент <datalist> надає список наперед визначених значень, що будуть запропоновані користувачам для цього поля. Усі значення в списку, що не є сумісними з type, не включаються в список варіантів. Запропоновані значення є пропозиціями, а не вимогою: користувачі можуть як обирати з такого наперед визначеного списку, так і вводити інші значення.

Дивіться приклад того, як варіанти для діапазону виводяться в різних браузерах, в розділі додавання позначок нижче.

max

Найбільше значення в діапазоні прийнятних значень. Якщо value, введене в елемент, перевищує max, то елемент не проходить валідацію обмежень. Якщо значення атрибута max не є числом, то такий елемент не має максимального значення.

Це значення повинно бути більшим або рівним значенню атрибута min. Читайте про атрибут HTML max.

min

Найменше значення в діапазоні прийнятних значень. Якщо value, введене в елемент, менше за min, то елемент не проходить валідацію обмежень. Якщо значення атрибута min не є дійсним числом, то такий елемент не має мінімального значення.

Це значення повинно бути меншим або рівним значенню атрибута max. Читайте про атрибут HTML min.

Примітка: Якщо значення min і max рівні, або значення max менше за значення min, то користувач не зможе взаємодіяти з полем діапазону.

step

Атрибут step – це число, що задає гранулярність, якій повинно відповідати значення. Лише значення, що відповідають заданому інтервалові крокування (min, якщо цей атрибут задано, а інакше – value, або ж відповідному усталеному значенню, якщо цих атрибутів немає), є дійсними.

Атрибут step також може бути заданий з рядковим значенням any. Таке значення step означає, що інтервал крокування не накладається, і що в заданому діапазоні приймаються будь-які значення (з урахуванням інших обмежень, як то min і max). Дивіться те, як це працює в браузерах, що це підтримують, в прикладі Задання step зі значенням any.

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

Усталене значення крокування для полів range – 1, що дозволяє вводити лише цілі числа, окрім випадків, коли основа крокування не є цілим числом: наприклад, якщо задати min зі значенням -10 і value зі значенням 1.5, то step зі значенням 1 дозволятиме лише значення, подібні до 1,5; 2,5; 3,5;… у додатному напрямку та -0,5; -1,5; -2,5;… у від'ємному. Дивіться атрибут HTML step.

Нестандартні атрибути

orient

Подібно до нестандартної властивості CSS -moz-orient, що впливає на елементи <progress> і <meter>, атрибут orient визначає орієнтацію повзуна діапазону. Серед значень – horizontal, тобто горизонтальна візуалізація діапазону, та vertical, що позначає візуалізацію по вертикалі.

Приклади

Коли тип number дає користувачам змогу вводити числа, необов'язково накладаючи обмеження, змушуючи вписувати значення між мінімумом та максимумом, він не вимагає вводити конкретне значення. Тип поля 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 зі значенням any:

HTML

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Значення: <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">Оберіть комфортну температуру:</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 для декількох полів діапазону

Щоб уникнути повторення коду, можна повторно використати один <datalist> для кількох елементів <input type="range">, а також інших типів <input>.

Примітка: Щоб показати підписи, як у прикладі нижче, потрібен окремий datalist для кожного поля діапазону.

HTML

<p>
  <label for="temp1">Температура для кімнати 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Температура для кімнати 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Температура для кімнати 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>

Результат

Додавання підписів

Можна підписати позначки, додавши елементам <option> атрибути label. Проте усталено вміст підписів не виводиться. Можна використати CSS, щоб показати підписи та коректно їх розташувати. Ось один зі способів це зробити.

HTML

<label for="tempB">Оберіть комфортну температуру:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="дуже холодно!"></option>
  <option value="25" label="прохолодно"></option>
  <option value="50" label="помірно"></option>
  <option value="75" label="тепліше!"></option>
  <option value="100" label="гаряче!"></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;
}

Результат

Створення вертикальних полів діапазону

Усталено браузери візуалізують поля діапазону як повзуни з ручкою, що ковзає вліво-вправо.

Щоб створити вертикальний діапазон, в якого ручка ковзатиме вгору-вниз, слід задати властивість CSS writing-mode зі значенням або vertical-rl, або vertical-lr.

<input type="range" min="0" max="10" value="8" />

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
• Створення вертикальних формових елементів
• Оформлення елемента діапазону
• Сумісність властивостей CSS