スライダーコントロールを表示する
HTMLページでスライダーコントロールを表示するコードを紹介します。
概要
HTMLページでスライダーコントロールを表示する場合は
inputタグを利用します。スライダーコントロールを表示する場合は、
type属性に
"range"の値を設定します。
書式
下記の書式になります。
<input type="range" value="(スライダーの初期位置)" min="(スライダーの最小値の値)" max="(スライダーの最大値の値)"/>
<input type="range" value="(スライダーの初期位置)" min="(スライダーの最小値の値)" max="(スライダーの最大値の値)" step="(スライダーの刻み幅)"/>
例
コード
下記の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ページを表示します。下図のページが表示されます。
スライダーが表示され、スライダーのつまみが中央に表示されます。
スライダーのつまみをドラッグして、左右に移動させ、スライダーの値を変更できます。
補足
スライダーの位置を取得するコードは
こちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最近は生成AIの画像生成の沼に沈んでいる。
