数値入力するスライドバー・スライダーの作り方

下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。

作り方

HTMLのinput要素で作れます。

<input type="range" min="2" max="32" step="1" />

• type=”range”：重要。これのおかげでスライダーになってます。
• min：最小値を指定
• max：最大値を指定
• step：間隔を指定

　　

作るの難しそう…と思っていたのですが、html要素1つでできました。たまにhtmlに驚かされます。