HTML5のスライダーで数値を入力するサンプルです。
input要素のrange属性を使用します。
確認環境 ・Windows10 ・Google Chrome |
目次
スライダーで数値を入力するサンプル
スライダーを左右に動かすとスライダーにあわせて数字が動的に変わります。
このサンプルでは、値は1から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
関連の記事
JavaScript イベントとイベントハンドラのサンプル
HTML5 進捗状況を表示するサンプル(プログレスバー)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
[HTML5] number 上下ボタンで数値を入力する
[HTML5] detailsとsummary クリックで詳細を開く