Web/HTML/Element/input/range を更新（未翻訳部分有） (#2081)

- 2021/06/15 時点のの英語版に更新

1 files changed, 67 insertions, 89 deletions

diff --git a/files/ja/web/html/element/input/range/index.html b/files/ja/web/html/element/input/range/index.html
index c9ba8346b0..1ba58f6167 100644
--- a/files/ja/web/html/element/input/range/index.html
+++ b/files/ja/web/html/element/input/range/index.html
@@ -17,22 +17,21 @@ tags:
   - フォーム
   - 要素
 translation_of: Web/HTML/Element/input/range
+browser-compat: html.elements.input.input-range
 ---
 <div>{{HTMLRef("Input_types")}}</div>
 
-<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの値が厳密なものではない限り、通常は使用するべきではありません。</p>
+<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>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
 <p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p>
 
 <table class="properties">
  <tbody>
   <tr>
    <td><strong>{{anch("Value", "値")}}</strong></td>
-   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。 {{jsxref("Number")}} として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用する。</td>
+   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。数値として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用してください。</td>
   </tr>
   <tr>
    <td><strong>イベント</strong></td>
@@ -53,7 +52,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h3 id="Validation" name="Validation">検証</h3>
+<h3 id="Validation">検証</h3>
 
 <p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p>
 
@@ -64,16 +63,16 @@ translation_of: Web/HTML/Element/input/range
  <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li>
 </ul>
 
-<h3 id="Value" name="Value">値</h3>
+<h3 id="Value">値</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
+<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
                : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
 
 <p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p>
 
-<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+<h2 id="Additional_attributes">追加の属性</h2>
 
 <p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p>
 
@@ -104,29 +103,29 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+<p id="attr-list">{{page("/ja/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}</p>
 
-<p>See the <a href="#A_range_control_with_hash_marks">range control with hash marks</a> below for an example of how the options on a range are denoted in supported browsers</p>
+<p>対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の<a href="#a_range_control_with_hash_marks">ハッシュマーク付き範囲コントロール</a>を参照してください。</p>
 
-<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+<h3 id="attr-max"><code id="max">max</code></h3>
 
-<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
+<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
 
 <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p>
 
-<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+<h3 id="attr-min"><code id="min">min</code></h3>
 
-<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
+<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
 
 <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p>
 
-<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+<h3 id="attr-step"><code id="step">step</code></h3>
 
 <p>{{page("/ja/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,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</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,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p>
 
-<h3 id="Non_Standard_Attributes" name="Non_Standard_Attributes">標準外の属性</h3>
+<h3 id="Non_Standard_Attributes">標準外の属性</h3>
 
 <table class="standard-table">
  <thead>
@@ -143,16 +142,15 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<dl>
- <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
- <dd id="orient-include">CSS の標準外の -moz-orient non-standard プロパティは、 {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響し、範囲スライダーの向きを定義する <code>orient</code> 属性を定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</dd>
-</dl>
+<h3 id="attr-orient"><code id="orient">orient</code> {{non-standard_inline}}</h3>
+
+<p id="orient-include">CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える <code>orient</code> 属性は、範囲スライダーの向きを定義する定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</p>
 
-<div class="blockIndicator note">
-<p>注: 以下の input 型の属性のうち、 <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 class="notecard note">
+<p>メモ: input 型の属性のうち、 <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" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p>
 
@@ -167,22 +165,22 @@ translation_of: Web/HTML/Element/input/range
 
 <p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p>
 
-<h3 id="Specifying_the_minimum_and_maximum" name="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
+<h3 id="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
 
 <p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p>
 
-<p>例えば、ユーザーに-10から10までの値を尋ねるのであれば、次のようにすることができます。</p>
+<p>例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>
 
 <p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
 
-<h3 id="Setting_the_values_granularity" name="Setting_the_values_granularity">値の精度の設定</h3>
+<h3 id="Setting_the_values_granularity">値の精度の設定</h3>
 
 <p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 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>
+<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
 
 <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
 </div>
@@ -190,22 +188,22 @@ translation_of: Web/HTML/Element/input/range
 <p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p>
 
 <div id="Granularity_sample2">
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
 
 <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
 
 <p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p>
 </div>
 
-<h3 id="Adding_hash_marks_and_labels" name="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
+<h3 id="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
 
 <p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p>
 
-<h4 id="Range_control_mockups" name="Range_control_mockups">範囲コントロールのモックアップ</h4>
+<h4 id="Range_control_mockups">範囲コントロールのモックアップ</h4>
 
 <p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p>
 
-<h5 id="An_unadorned_range_control" name="An_unadorned_range_control">簡素な範囲コントロール</h5>
+<h5 id="An_unadorned_range_control">簡素な範囲コントロール</h5>
 
 <p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p>
 
@@ -217,13 +215,13 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range"&gt;</pre>
    </td>
    <th>Screenshot</th>
   </tr>
   <tr>
-   <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>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-plain.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -234,7 +232,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h5 id="A_range_control_with_hash_marks" name="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
+<h5 id="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
 
 <p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p>
 
@@ -246,7 +244,7 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range" list="tickmarks"&gt;
 
 &lt;datalist id="tickmarks"&gt;
@@ -267,7 +265,7 @@ translation_of: Web/HTML/Element/input/range
    <th>Screenshot</th>
   </tr>
   <tr>
-   <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>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-ticks.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -278,7 +276,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h5 id="A_range_control_with_hash_marks_and_labels" name="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
+<h5 id="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
 
 <p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p>
 
@@ -290,7 +288,7 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range" list="tickmarks"&gt;
 
 &lt;datalist id="tickmarks"&gt;
@@ -311,7 +309,7 @@ translation_of: Web/HTML/Element/input/range
    <th>Screenshot</th>
   </tr>
   <tr>
-   <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>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-labels.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -326,22 +324,23 @@ translation_of: Web/HTML/Element/input/range
 <p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p>
 </div>
 
-<h3 id="Change_the_orientation" name="Change_the_orientation">方向の変更</h3>
+<h3 id="Change_the_orientation">方向の変更</h3>
 
 <div class="xhidden">
-<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value.<strong> </strong>This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
+<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value. This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
 
-<p>In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
+<p>In the meantime, we can make the range vertical by rotating it using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
 
 <p>Consider this range control:</p>
 
 <div id="Orientation_sample1">
-<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
 </div>
 
-<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "orientation_sample1.png")}}</p>
 
-<p>This control is horizontal (at least on most if not all major browers; others might vary).</p>
+<p>This control is horizontal (at least on most if not all major browsers; others might vary).</p>
+</div>
 
 <h3 id="Standards">Standards</h3>
 
@@ -350,19 +349,18 @@ translation_of: Web/HTML/Element/input/range
 <div id="Orientation_sample2">
 <h4 id="CSS">CSS</h4>
 
-<pre class="brush: css notranslate">#volume {
+<pre class="brush: css">#volume {
   height: 150px;
   width: 50px;
 }</pre>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
-</div>
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "orientation_sample2.png")}}</p>
 </div>
 
 <p>Unfortunately, no major browsers currently support vertical range controls directly.</p>
@@ -375,7 +373,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p>
 
-<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
   &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 &lt;/div&gt;</pre>
 
@@ -383,7 +381,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p>
 
-<pre class="brush: css notranslate">.slider-wrapper {
+<pre class="brush: css">.slider-wrapper {
   display: inline-block;
   width: 20px;
   height: 150px;
@@ -393,7 +391,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Then comes the style information for the <code>&lt;input&gt;</code> element within the reserved space:</p>
 
-<pre class="brush: css notranslate">.slider-wrapper input {
+<pre class="brush: css">.slider-wrapper input {
   width: 150px;
   height: 20px;
   margin: 0;
@@ -403,7 +401,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p>
 
-<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "orientation_sample3.png")}}</p>
 
 <h3 id="appearance_property">appearance property</h3>
 
@@ -413,14 +411,14 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We use the same HTML as in the previous examples:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 </pre>
 
 <h4 id="CSS_3">CSS</h4>
 
 <p>We target just the inputs with a type of range:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   -webkit-appearance: slider-vertical;
 }</pre>
 
@@ -434,7 +432,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
 </pre>
 
 <p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
@@ -447,14 +445,14 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We use the same HTML as in the previous examples:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 </pre>
 
 <h4 id="CSS_4">CSS</h4>
 
 <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   writing-mode: bt-lr;
 }</pre>
 
@@ -468,52 +466,32 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
 </pre>
 
 <h4 id="CSS_5">CSS</h4>
 
 <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</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>
 
 <p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</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>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.input.input-range")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
  <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
  <li><code><a href="/ja/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
  <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li>