A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/input/range below:

<input type="range"> - HTML | MDN

<input type="range">

Baseline Widely available *

<input> 要素の range 型は、指定された値より小さくなく、別に指定された値より大きくない値をユーザーに指定させるために使用します。しかし、厳密な値は重要とはされません。これは通常、 number 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。

この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。

試してみましょう 
<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input
    type="range"
    id="cowbell"
    name="cowbell"
    min="0"
    max="100"
    value="90"
    step="10" />
  <label for="cowbell">Cowbell</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

ユーザーのブラウザーが range 型に対応していない場合は、 text 入力で代替されて扱われます。

検証

利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。

値

value 属性は、選択された数値を文字列で格納します。値は空文字列 ("") になることはありません。既定値は指定した最小値と最大値の中間の値です。ただし、最大値が最小値より小さい場合は、min 属性の値が既定値に設定されます。既定値を決定するアルゴリズムは次の通りです。

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。

追加の属性

すべての <input> 型で共通する属性に加え、 range 型の入力欄は次の属性にも対応しています。

メモ: range 型の入力欄に適用できない入力属性は、 accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src です。これらの属性が指定されても、無視されます。

list

list 属性の値は、同じ文書内にある <datalist> 要素の id です。 <datalist> は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、この type と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の目盛りの追加を参照してください。

max

この入力欄が受け付ける最大値です。要素に入力された value がこれを超えた場合、要素は制約検証に失敗します。 max 属性の値が数値でない場合、要素は最大値を持ちません。

この値は min 属性の値より大きいか、等しくしなければなりません。HTML の max 属性を参照してください。

min

許可されている値の範囲の最小値です。要素の value がこれより小さい場合、要素は制約検証に失敗します。 min 属性の値が数値でない場合、要素は最小値を持ちません。

この値は max 属性の値以下でなければなりません。 HTML の min 属性を参照してください。

メモ: もし min と max の値が等しかったり、max の値が min の値より低かったりすると、ユーザーはその範囲を操作することができなくなります。

step

step 属性は値が吸着する粒度を指定する数値です。指定した刻み間隔（min を指定した場合は value、それ以外の場合は適切な既定値）に一致する値のみが有効となります。

step 属性には文字列値 any を設定することもできます。この step 値は、刻み間隔を意味せず、指定した範囲内で任意の値が許されることを意味します（他にも min や max のような制約がある場合は除きます）。対応しているブラウザーでこのように動作するのかについては、step を any に設定の例を参照してください。

メモ: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。

range 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。例えば、 min に -10 を、 value に 1.5 を設定した場合、 step が 1 の場合は正の方向に 1.5, 2.5, 3.5,… など、負の方向に -0.5, -1.5, -2.5,… などのみが許可されます。 HTML の step 属性を参照してください。

標準外の属性 orient

CSS の標準外の -moz-orient non-standard プロパティと同様に <progress> および <meter> 要素に影響を与える orient 属性は、範囲スライダーの向きを定義する定義します。値は horizontal が範囲を水平方向に描画することを、 vertical が範囲を垂直に描画することを意味します。

例

number 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 range 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。

range 入力欄がよく使用される場合の例をいくつか示します。

原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を 0.5 に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。

最小値と最大値の指定

既定では、最小値は 0 で最大値は 100 です。これが望むものでないのであれば、 min や max 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。

例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。

<input type="range" min="-10" max="10" />
値の粒度の設定

既定では、粒度は 1 であり、値は常に整数であることを意味します。粒度は、step 属性を変更することで制御することができます。例えば、 5 から 10 の中間値が必要であれば、step の値を 0.5 に設定してください。

step 属性の設定 
<input type="range" min="5" max="10" step="0.5" />
step を any に設定

小数点以下が何桁になろうと、どんな値でも受け入れたい場合は、 step 属性に any という値を指定することができます。

HTML 
<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>
JavaScript 
const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});
結果

この例では、 0 から π までの任意の値を選択することができ、選択された値の小数部は制限されません。JavaScript は、ユーザーが範囲と対話することによって値がどのように変化するかを示すために使用されます。

目盛の追加

範囲コントロールに目盛を追加するには、list 属性を記載して、それにコントロール上の一連の目盛を定義する <datalist> 要素の id を指定します。各点は <option> 要素を使用して表現され、その value には、マークを描画すべき範囲の値が設定されます。

HTML 
<label for="temp">快適な温度を選択してください。</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>
結果 同じデータリストを複数の範囲コントロールで使用

コードの重複を防ぐために、同じ <datalist> を複数の <input type="range"> 要素や他の <input> 型に再利用することができます。

メモ: 下記の例のようにラベルを表示することもしたい場合は、それぞれの範囲の入力に対して datalist が必要です。

HTML 
<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>
結果 ラベルの追加

目盛には <option> 要素に label 属性を与えることで、ラベル付けをすることができます。ただし、既定では、ラベルのコンテンツは表示されません。このラベルを表示したり、ラベルを正しい位置に配置するためには CSS を使用してください。以下はその方法の一つです。

HTML 
<label for="temp">快適な温度を選択してください。</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="とても冷たい"></option>
  <option value="25" label="冷たい"></option>
  <option value="50" label="ふつう"></option>
  <option value="75" label="やや温かい"></option>
  <option value="100" label="熱い"></option>
</datalist>
CSS 
datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}
結果 垂直の範囲コントロールの作成

既定では、ブラウザーは範囲入力を、つまみが左右にスライドするスライダーとして描画します。

つまみが上下にスライドする垂直方向の範囲を作成するには、CSS の writing-mode プロパティを vertical-rl または vertical-lr に設定してください。

<input type="range" min="0" max="10" value="8" />

input[type="range"] {
  writing-mode: vertical-lr;
}

これにより、範囲スライダーが垂直に描画されます。

CSS の appearance プロパティを標準外の slider-vertical 値に設定すると、 Chrome と Safari の古いバージョンに対応することもでき、標準外の orient="vertical" 属性を設定すると、 Firefox の古いバージョンに対応することもできます。

例については垂直フォームコントロールの作成をご覧ください。

技術的概要 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4