HTML5 スライダーで数値を入力するサンプル(range)

HTML5のスライダーで数値を入力するサンプルです。
input要素のrange属性を使用します。

確認環境
・Windows10
・Google Chrome

スライダーで数値を入力するサンプル

スライダーで数値を入力するサンプル

スライダーを左右に動かすとスライダーにあわせて数字が動的に変わります。
このサンプルでは、値は１から10までにしています。

コード

上記サンプルのコードです。

<body >

<input type="range" value="1" min="1" max="10" step="1"
  oninput="document.getElementById('output1').value=this.value">

<output id="output1">1</output>

</body>

3行目は、range属性を指定しています。
・最小値はminにセットし、最大値はmaxにセットします。省略可能です。
　省略された場合は0から100になります。
・初期値はvalueにセットします。
・増分値はstepにセットします。省略可能です。省略された場合は、1になります。
4行目は、oninputのイベントハンドラです。スライダーを移動させるとスライダーのvalue値をoutput要素のvalueに渡します。

range属性

input要素のrange属性です。<input type="range">となります。
スライダーを動かすとスライダーの位置の値がvalueにセットされます。
以下はMDNのinput要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

Output要素

HTML5で導入されました。
計算の結果等やユーザによるアクションの結果を表示します。
以下はMDNのoutput要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/output