diff --git a/files/uk/web/html/element/input/range/index.md b/files/uk/web/html/element/input/range/index.md index 777b769663..b1c17e7f4c 100644 --- a/files/uk/web/html/element/input/range/index.md +++ b/files/uk/web/html/element/input/range/index.md @@ -13,7 +13,7 @@ browser-compat: html.elements.input.type_range {{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}} -Якщо браузер користувача не підтримує `range`, то це поле відступить і працюватиме як поле `{{HTMLElement('input/text', 'text')}}`. +Якщо браузер користувача не підтримує `range`, то це поле відступить і працюватиме як поле {{HTMLElement('input/text', 'text')}}. ### Валідація @@ -41,6 +41,8 @@ defaultValue = На додачу до атрибутів, спільних для всіх елементів {{HTMLElement("input")}}, поля діапазону приймають наступні. +> **Примітка:** Наступні атрибути полів не застосовуються до полів діапазону: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size` і `src`. Усі вони, бувши заданими, ігноруються. + ### list Значення атрибута `list` – це {{domxref("Element.id", "id")}} елемента {{HTMLElement("datalist")}}, розташованого в тому самому документі. Елемент {{HTMLElement("datalist")}} надає список наперед визначених значень, що будуть запропоновані користувачам для цього поля. Усі значення в списку, що не є сумісними з [`type`](/uk/docs/Web/HTML/Element/input#type-typ), не включаються в список варіантів. Запропоновані значення є пропозиціями, а не вимогою: користувачі можуть як обирати з такого наперед визначеного списку, так і вводити інші значення. @@ -77,8 +79,6 @@ defaultValue = Подібно до нестандартної властивості CSS -moz-orient, що впливає на елементи {{htmlelement('progress')}} і {{htmlelement('meter')}}, атрибут `orient` визначає орієнтацію повзуна діапазону. Серед значень – `horizontal`, тобто горизонтальна візуалізація діапазону, та `vertical`, що позначає візуалізацію по вертикалі. -> **Примітка:** Наступні атрибути полів не застосовуються до полів діапазону: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size` і `src`. Усі вони, бувши заданими, ігноруються. - ## Приклади Коли тип `number` дає користувачам змогу вводити числа, необов'язково накладаючи обмеження, змушуючи вписувати значення між мінімумом та максимумом, він не вимагає вводити конкретне значення. Тип поля `range` дає змогу запитати від користувача значення у випадках, в яких користувачу може навіть бути байдуже, або може не знати, яке саме конкретно значення було вибрано. @@ -249,92 +249,25 @@ input[type="range"] { Усталено браузери візуалізують поля діапазону як повзуни з ручкою, що ковзає вліво-вправо. -Щоб створити вертикальний діапазон, в якого ручка ковзатиме вгору-вниз, слід задати властивість CSS {{cssxref('appearance')}} зі значенням `slider-vertical` і нестандартний атрибут `orient` для Firefox. - -#### Горизонтальне поле діапазону - -Погляньте на цей контрольний елемент діапазону: - -```html - -``` - -{{EmbedLiveSample("horyzontalne-pole-diapazonu", 200, 40)}} - -Цей контрольний елемент – горизонтальний (принаймні на більшості, якщо не на всіх головних браузерах; інші можуть показувати його по-різному). - -#### Застосування властивості appearance - -Властивість {{cssxref('appearance')}} має нестандартне значення `slider-vertical`, котре, зрештою, робить повзуни вертикальними. - -Використаймо такий же HTML, як в попередніх прикладах: - -```html - -``` - -Ціллю є лише поля з типом діапазону: - -```css -input[type="range"] { - appearance: slider-vertical; -} -``` - -{{EmbedLiveSample("zastosuvannia-vlastyvosti-appearance", 200, 200)}} - -#### Застосування атрибута orient - -Виключно в Firefox є нестандартна властивість `orient`. - -Використаймо HTML, подібний до попередніх прикладів, додавши цей атрибут зі значенням `vertical`: - -```html - -``` - -{{EmbedLiveSample("zastosuvannia-atrybuta-orient", 200, 200)}} - -#### writing-mode: bt-lr +Щоб створити вертикальний діапазон, в якого ручка ковзатиме вгору-вниз, слід задати властивість CSS {{cssxref("writing-mode")}} зі значенням або `vertical-rl`, або `vertical-lr`. -Властивість {{cssxref('writing-mode')}}, загалом, не слід використовувати для зміни напрямку письма для потреб інтернаціоналізації чи локалізації, але її можна використовувати для особливих ефектів. - -Використаймо такий же HTML, як в попередніх прикладах: - -```html - +```html hidden + ``` -Ціллю є лише поля з типом діапазону; до них застосовується зміна напряму письма з усталеного на `bt-lr`, тобто знизу-вгору та зліва-направо: - ```css input[type="range"] { - writing-mode: bt-lr; + writing-mode: vertical-lr; } ``` -{{EmbedLiveSample("writing-mode-bt-lr", 200, 40)}} - -#### Збирання всього докупи +Це змушує повзун візуалізуватися вертикально: -Оскільки кожний з прикладів вище працює в різних браузерах, їх можна зібрати докупи, щоб це працювало в різних браузерах: +{{EmbedLiveSample("stvorennia-vertykalnykh-poliv-diapazonu", 200, 200)}} -Для Firefox – зберігається атрибут `orient` зі значенням `vertical`: - -```html - -``` - -Ціллю є лише `input` з `type` зі значенням `range` та `orient` зі значенням `vertical`, і застосовується зміна `writing-mode` з усталеного на `bt-lr`, тобто знизу-вгору та зліва-направо, для версій Edge до Blink, а також `appearance: slider-vertical`, що підтримується в браузерах Blink і Webkit: - -```css -input[type="range"][orient="vertical"] { - writing-mode: bt-lr; - appearance: slider-vertical; -} -``` +Також можна задати властивість CSS {{cssxref('appearance')}} з нестандартним значенням `slider-vertical`, якщо потрібно підтримувати старі версії Chrome та Safari, і додати нестандартний атрибут `orient="vertical"`, щоб підтримувалися старі версії Firefox. -{{EmbedLiveSample("zbyrannia-vsoho-dokupy", 200, 200)}} +Дивіться приклади в [Створенні вертикальних формових елементів](/uk/docs/Web/CSS/CSS_writing_modes/Vertical_controls). ## Технічний підсумок @@ -407,5 +340,6 @@ input[type="range"][orient="vertical"] { - [``](/uk/docs/Web/HTML/Element/input/number) - {{domxref('validityState.rangeOverflow')}} і {{domxref('validityState.rangeUnderflow')}} - [Контроль декількох параметрів за допомогою ConstantSourceNode](/uk/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) +- [Створення вертикальних формових елементів](/uk/docs/Web/CSS/CSS_writing_modes/Vertical_controls) - [Оформлення елемента діапазону](https://css-tricks.com/sliding-nightmare-understanding-range-input/) - [Сумісність властивостей CSS](/uk/docs/Learn/Forms/Property_compatibility_table_for_form_controls)