initial commit

1 files changed, 480 insertions, 0 deletions

diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html
new file mode 100644
index 0000000000..b46af66650
--- /dev/null
+++ b/files/ru/web/html/element/input/range/index.html
@@ -0,0 +1,480 @@
+---
+title: <input type="range">
+slug: Web/HTML/Element/Input/range
+tags:
+  - контроллер
+  - слайдер
+translation_of: Web/HTML/Element/input/range
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">Элементы {{HTMLElement("input")}} с типом <strong><code>range</code></strong> позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как {{HTMLElement('input/number', 'number')}}.</span> Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправте нам пул реквест.</p>
+
+<p>Если используемый браузер не поддерживает тип <code>range</code>, он будет отображаться как input<code>{{HTMLElement('input/text', 'text')}}.</code></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}}, содержащий строковое представление выбранного числового значения; используйте {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} чтобы получить значение {{jsxref("Number")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>list</code>, <code>value</code>, и <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} и {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Валидация">Валидация</h3>
+
+<p>Для этого поля нет доступного патерна валидации, но следующая валидация реализованны следующие проверки</p>
+
+<ul>
+ <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.</li>
+ <li>Значение не может быть меньше чем {{htmlattrxref("min", "input")}}. По умолчанию: 0.</li>
+ <li> Значение не может быть больше чем {{htmlattrxref("max", "input")}}. По умолчанию: 100.</li>
+ <li>Значение должно кратно {{htmlattrxref("step", "input")}}. По умолчанию: 1.</li>
+</ul>
+
+<h3 id="sect1"></h3>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p>
+
+<pre class="brush: js notranslate">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+
+<p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведет к установлению значения равного атрибуту max.</p>
+
+<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2>
+
+<p>В дополнение к атрибутам, общим для всех элементов {{HTMLElement("input")}}, range инпуты предлагают следующие атрибуты:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>id элемента &lt;datalist&gt;, который сожержит предопределенные значение (не обязательно)</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Максимальное допустимое значение</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Минимальное допустимое значение</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Шаговый, используемый для пользовательского интерфейса и для проверки</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<p>Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range$edit#A_range_control_with_hash_marks">управление диапазоном с помощью решетки</a> ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>Это значение должно быть больше или равно значению атрибута  <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введенный в элемент, меньше этого значения, то элемент не проходит  <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">проверку ограничения</a>. Если значение атрибута <code>min</code> не является числом, то элемент не имеет максимального значения.</p>
+
+<p>Это значение должно быть меньше или равно значению атрибута <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>По умолчанию шаг для инпута с типом <code>range</code> равен 1, допустим ввод только целых чисел, <em>если </em> база шага не является целым; например, если вы установили <code>min</code> на -10 и <code>value</code> на 1.5, то <code>step</code>  1 позволит только такие значения как 1.5, 2.5, 3.5,... в положительном направлении и -0.5, -1.5, -2.5,... в отрицательном направлении.</p>
+
+<h3 id="Не_стандартные_атрибуты">Не стандартные атрибуты</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>Устанавливает ориентацию слайдера. <strong>Firefox only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd id="orient-include">Похоже на  -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элемены, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значет что слайдер быдет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Note: Следующие атрибуты не применимы: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, и <code>width</code>. Каждый из них будет проигнорирован в случаее употребления.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Пока тип <code>number</code> позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определенное значение. Инпут с типом <code>range</code> позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.</p>
+
+<p>Несколько примеров основный ситуаций, в которых инпуты с range используются:</p>
+
+<ul>
+ <li>Аудио-контроллеры громкости и баланса, или контроллеры фильтра.</li>
+ <li>Контроллеры настройки цвета, такие как цветовые каналы, прозрачность, яркость, и т.д.</li>
+ <li>Контроллеры игровой настройки, такие как  сложность, дальность видимости, размер мира и т.д.</li>
+ <li>Длина пароля для сгенерированных паролей менеджера паролей.</li>
+</ul>
+
+<p>Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает "установить громкости наполовину максимума" вместо "установить громкость на 0.5".</p>
+
+<h3 id="Указание_минимума_и_максимума">Указание минимума и максимума</h3>
+
+<p>По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с легкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.</p>
+
+<p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
+
+<h3 id="Настройка_детализации_значения">Настройка детализации значения</h3>
+
+<p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p>
+
+<div id="Granularity_sample1">
+<pre class="brush: html notranslate">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
+</div>
+
+<p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p>
+
+<div id="Granularity_sample2">
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
+
+<p>Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.</p>
+</div>
+
+<h3 id="Добавление_хэш-меток_и_лейблов">Добавление хэш-меток и лейблов</h3>
+
+<p>Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.</p>
+
+<h4 id="Макеты_контроллера_диапазона">Макеты контроллера диапазона</h4>
+
+<p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p>
+
+<h5 id="Недекорированный_контроллер_даипазона">Недекорированный контроллер даипазона</h5>
+
+<p>Этот результат вы получите, если не укажите атрибут {{htmlattrxref("list", "input")}}, или браузер не будет его поддерживать.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range"&gt;</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Контроллер_диапазона_с_хэш-метками">Контроллер диапазона с хэш-метками</h5>
+
+<p>Контроллер диапазона, использующий атрибут <code>list</code>, указывающий ID {{HTMLElement("datalist")}}, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента {{HTMLElement("option")}} с его набором {{htmlattrxref("value", "option")}} значений диапазона, при котором должна быть нарисована метка.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Контроллер_диапазона_с_хэш-метками_и_лейблами">Контроллер диапазона с хэш-метками и лейблами</h5>
+
+<p>Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут {{htmlattrxref("label", "option")}} элементам {{HTMLElement("option")}}, соответствующим значениям, на которых вы бы хотели видеть лейблы.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0" label="0%"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50" label="50%"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100" label="100%"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание</strong>: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддрживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг {{htmlelement("datalist")}} должен быть стилизован с помощью  CSS, так как его свойство {{cssxref("display")}} по умолчанию -  <code>none</code>, тем самым скрывая лейблы.</p>
+</div>
+
+<h3 id="Изменение_ориентации">Изменение ориентации</h3>
+
+<p>По умолчанию, если браузер отображает инпут диапозона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализованно, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ниодин из наиболее используемых браузеров не имплементировал это пока. (Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). также, возможно, <a href="https://github.com/whatwg/html/issues/4177">следующий баг под вопросом</a>.</p>
+
+<p>В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки {{cssxref('appearance')}}  для <code>slider-vertical</code>, использование нестандартной ориентации <code>orient</code> в Firefox,или изменение text direction для Internet Explorer и Edge</p>
+
+<p>Рассмотрим контроллер диапазона:</p>
+
+<pre class="notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+
+<p>Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).</p>
+
+<h3 id="Standards">Standards</h3>
+
+<p>Следуюя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="notranslate">#volume {
+  height: 150px;
+  width: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
+
+<p>К сожалению, большенство браузеров сейчас не поддерживают вертикальные контроллы напрямую.</p>
+
+<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3>
+
+<p>Но вы, все же, можете сделать вертикльный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя {{cssxref("transform")}} для поворото элемента на 90 градусов. Посмотрим:</p>
+
+<div id="Orientation_sample3">
+<h4 id="HTML_2">HTML</h4>
+
+<p>В HTML нужно добавить обертку вокруг {{HTMLElement("input")}}  - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p>
+
+<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обертки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повернутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p>
+
+<pre class="brush: css notranslate">.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+</pre>
+
+<p>Затем информация о стиле элемента <code>&lt;input&gt;</code> в зарезервированном пространстве:</p>
+
+<pre class="brush: css notranslate">.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}</pre>
+
+<p>Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на  0 и {{cssxref("transform-origin")}} смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поварачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.</p>
+
+<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+
+<h3 id="appearance_property">appearance property</h3>
+
+<p>Свойство {{cssxref('appearance')}} имеет нестандартное значение <code>slider-vertical</code> , которое делает слайдер вертикальным.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range:</p>
+
+<pre class="notranslate">input[type="range"] {
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p>
+
+<h3 id="orient_attribute">orient attribute</h3>
+
+<p>В Firefox, реализованно нестандартное свойство <code>orient</code>.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением <code>vertical</code>:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
+
+<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3>
+
+<p>Свойство {{cssxref('writing-mode')}} может быть использовано для специальных эфектов </p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p>
+
+<pre class="notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+}</pre>
+
+<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p>
+
+<h3 id="Все_вместе">Все вместе</h3>
+
+<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем обьединить все вместе чтоб добится кроссбраузерности решения:</p>
+
+<h4 id="HTML_6">HTML</h4>
+
+<p>Оставим <code>orient</code> атрибут  со значением <code>vertical</code> для Firefox:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и обавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p>
+
+<pre class="notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первое определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-range")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} и интерфейс {{domxref("HTMLInputElement")}}, на котором он основан</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
+ <li>{{domxref('validityState.rangeOverflow')}} и{{domxref('validityState.rangeUnderflow')}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
+ <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li>
+</ul>