目次

スライダーコントロールを表示する

目次

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ページを表示します。下図のページが表示されます。
スライダーが表示され、スライダーのつまみが中央に表示されます。
スライダーコントロールを表示する:画像1

スライダーのつまみをドラッグして、左右に移動させ、スライダーの値を変更できます。
スライダーコントロールを表示する:画像2
スライダーコントロールを表示する:画像3

補足
スライダーの位置を取得するコードはこちらの記事を参照してください。

AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2020-06-26
Copyright © 1995–2025 iPentec all rights reserverd.