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

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

確認環境
・Windows10
・Google Chrome

目次

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

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

 1

コード

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

<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>

range属性

Output要素

関連の記事

JavaScript イベントとイベントハンドラのサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)

△上に戻る