HTMLページでスライダーコントロールを表示するコードを紹介します。
HTMLページでスライダーコントロールを表示する場合はinputタグを利用します。スライダーコントロールを表示する場合は、type属性に"range"の値を設定します。
下記の書式になります。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>スライダーコントロールのデモ</p>
<input type="range" value="50" min="1" max="100"/>
</body>
</html>
下記のinputタグがスライダーコントロールのコードです。最小値を1、最大値を100とし、初期状態は中央の値の50を設定します。ページ表示時にスライダーのつまみが中央に表示される動作とします。
<input type="range" value="50" min="1" max="100"/>
上記のHTMLページを表示します。下図のページが表示されます。
スライダーが表示され、スライダーのつまみが中央に表示されます。
スライダーのつまみをドラッグして、左右に移動させ、スライダーの値を変更できます。
