マジでググってすぐ出てこず、jqueryの方ばかり出てきて、自分の記憶違いを疑ったのでメモ
参照元
< input type="range" > - HTML: HyperText Markup Language | MDN
スライダーの定義
今回とりあげる「スライダー」は以下の意味のもの
つまみを直線移動させる入力機器またはウィジェット (GUI)。 - スライダー - Wikipedia
「カルーセルスライダー」の略称として「スライダー」が用いられることがあるが、今回は別のものとする。
HTML例
See the Pen range sample by しんくう (@shinkufencer) on CodePen.
属性の詳細はMDNのドキュメントのほうが詳しくのっているので、そちらを参照してほしいですが、よく使う属性としては以下のようなものがある。
- 値の最高値と最低値の
maxとmin - 初期値の設定の
value - スライドの幅の単位を設定する
step
注意点
通常の <button>要素同様にWebブラウザによってスライダーのトグルなどのUIパーツの絵は異なる。そのため、CSSで同じ形になるように整える必要がある
