update(HTML): web/html/element/input/range

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
-<input type="range" id="volume" min="0" max="11" value="7" step="1" />
-```
-
-{{EmbedLiveSample("horyzontalne-pole-diapazonu", 200, 40)}}
-
-Цей контрольний елемент – горизонтальний (принаймні на більшості, якщо не на всіх головних браузерах; інші можуть показувати його по-різному).
-
-#### Застосування властивості appearance
-
-Властивість {{cssxref('appearance')}} має нестандартне значення `slider-vertical`, котре, зрештою, робить повзуни вертикальними.
-
-Використаймо такий же HTML, як в попередніх прикладах:
-
-```html
-<input type="range" min="0" max="11" value="7" step="1" />
-```
-
-Ціллю є лише поля з типом діапазону:
-
-```css
-input[type="range"] {
-  appearance: slider-vertical;
-}
-```
-
-{{EmbedLiveSample("zastosuvannia-vlastyvosti-appearance", 200, 200)}}
-
-#### Застосування атрибута orient
-
-Виключно в Firefox є нестандартна властивість `orient`.
-
-Використаймо HTML, подібний до попередніх прикладів, додавши цей атрибут зі значенням `vertical`:
-
-```html
-<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
-```
-
-{{EmbedLiveSample("zastosuvannia-atrybuta-orient", 200, 200)}}
-
-#### writing-mode: bt-lr
+Щоб створити вертикальний діапазон, в якого ручка ковзатиме вгору-вниз, слід задати властивість CSS {{cssxref("writing-mode")}} зі значенням або `vertical-rl`, або `vertical-lr`.
 
-Властивість {{cssxref('writing-mode')}}, загалом, не слід використовувати для зміни напрямку письма для потреб інтернаціоналізації чи локалізації, але її можна використовувати для особливих ефектів.
-
-Використаймо такий же HTML, як в попередніх прикладах:
-
-```html
-<input type="range" min="0" max="11" value="7" step="1" />
+```html hidden
+<input type="range" min="0" max="10" value="8" />
 ```
 
-Ціллю є лише поля з типом діапазону; до них застосовується зміна напряму письма з усталеного на `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" min="0" max="11" value="7" step="1" orient="vertical" />
-```
-
-Ціллю є лише `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"] {
 - [`<input type="number">`](/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)