diff options
Diffstat (limited to 'files/ru/web/html/element/input/range/index.html')
| -rw-r--r-- | files/ru/web/html/element/input/range/index.html | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index a3fcca88d8..231f03d7b4 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/input/range <p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p> -<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> <p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.</p> @@ -159,7 +159,7 @@ translation_of: Web/HTML/Element/input/range <p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p> -<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> <p>{{EmbedLiveSample("Указание_минимума_и_максимума", 600, 40)}}</p> @@ -168,7 +168,7 @@ translation_of: Web/HTML/Element/input/range <p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p> <div id="Granularity_sample1"> -<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> </div> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/range <p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p> <div id="Granularity_sample2"> -<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> @@ -203,7 +203,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range"></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> @@ -223,7 +223,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -258,7 +258,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -333,7 +333,7 @@ translation_of: Web/HTML/Element/input/range <p>В HTML нужно добавить обёртку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> -<pre class="brush: html notranslate"><div class="slider-wrapper"> +<pre class="brush: html"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div></pre> @@ -341,7 +341,7 @@ translation_of: Web/HTML/Element/input/range <p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> -<pre class="brush: css notranslate">.slider-wrapper { +<pre class="brush: css">.slider-wrapper { display: inline-block; width: 20px; height: 150px; @@ -351,7 +351,7 @@ translation_of: Web/HTML/Element/input/range <p>Затем информация о стиле элемента <code><input></code> в зарезервированном пространстве:</p> -<pre class="brush: css notranslate">.slider-wrapper input { +<pre class="brush: css">.slider-wrapper input { width: 150px; height: 20px; margin: 0; @@ -378,7 +378,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range:</p> -<pre class="notranslate">input[type="range"] { +<pre>input[type="range"] { -webkit-appearance: slider-vertical; }</pre> @@ -405,14 +405,14 @@ translation_of: Web/HTML/Element/input/range <p>Используем тот же HTML что и в предыдущем примере:</p> -<pre class="brush:html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +<pre class="brush:html"><input type="range" min="0" max="11" value="7" step="1"> </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="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; }</pre> @@ -433,7 +433,7 @@ translation_of: Web/HTML/Element/input/range <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="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }</pre> |