「HTML5」range属性でスライダーで数値を入力するサンプル
環境
Windows 10 home 64bit
Google Chrome 103.0.5060.66
構文
1.range属性
input要素のrange属性です。<input type="range">となります。
スライダーを動かすとスライダーの位置の値がvalueにセットされます。
最小値はminにセットし、最大値はmaxにセットします。
初期値はvalueにセットします。
増分値はstepにセットします。
2.<output>: 出力要素
HTML の出力要素 (<output>) は、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。
使用例
<!DOCTYPE html>
<html>
<head>
<title>range属性とOutput要素のサンプル</title>
</head>
<body>
<input type="range" value="1" min="10" max="20" step="1"
oninput="document.getElementById('cft').value=this.value">
<output id="cft">10</output>
</body>
</html>
結果
スライダーを左右に動かすとスライダーに数値は10から20までにしています。