コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

HTMLでスライダーUIを作りたいときはinputタグのrangeタイプで作れる

マジでググってすぐ出てこず、jqueryの方ばかり出てきて、自分の記憶違いを疑ったのでメモ

参照元

< input type="range" > - HTML: HyperText Markup Language | MDN

スライダーの定義

今回とりあげる「スライダー」は以下の意味のもの

つまみを直線移動させる入力機器またはウィジェット (GUI)。 - スライダー - Wikipedia

「カルーセルスライダー」の略称として「スライダー」が用いられることがあるが、今回は別のものとする。

HTML例

See the Pen range sample by しんくう (@shinkufencer) on CodePen.

属性の詳細はMDNのドキュメントのほうが詳しくのっているので、そちらを参照してほしいですが、よく使う属性としては以下のようなものがある。

  • 値の最高値と最低値の maxmin
  • 初期値の設定の value
  • スライドの幅の単位を設定する step

注意点

通常の <button>要素同様にWebブラウザによってスライダーのトグルなどのUIパーツの絵は異なる。そのため、CSSで同じ形になるように整える必要がある

参考サイト