<progress>タグを用いたシークバーの書き方

TL;DR

備忘録。タグを用いて進捗を表現するのは楽

Introduction

タグはタスクの進捗状況を表すためのHTMLタグです。: 進捗インジケーター要素

たとえば数ページに渡るフォームなどでの入力進捗を出したり、ファイルなどがアップロード中であることを表示したり、いろいろな進捗に関わる目的に利用できるタグだと思います。
そういった多様な目的のなかで例えば任意のポイントの進捗を得たい場合があるのではないかと思います。端的にはメディアのプレイバックの位置をシークしたりとか、一連のプロセスの任意の場所に再度移動したい場合があると思います。
そういった目的を<progress>タグを用いたクリック＆ドラッグで操作できるような実装を備忘録として乗せたいと思います。
ReactやVueでの書き方とかは追記しますが一旦Vanillaで書いておきます

<progress>タグ

Progressはタグのみでvalue属性がないと単純にプロセス中であることを示すUIとなり、値があることで進捗を表現することができます

See the Pen Progress Tag - example 1 by kenjiwilkins (@kenjiwilkins) on CodePen.

このUIはブラウザのスタイルシートによって表現されているので、reset.cssやTailwindなどデフォルトで余計なCSSを剥がすようなライブラリなどを利用していると思ったようなUIにならないので注意しましょう

See the Pen Progress Tag - example 2 by kenjiwilkins (@kenjiwilkins) on CodePen.

まあ、むしろProgressをそのままのUIで使うケースのほうが少ないと思いますが。

ドラッグしてみる

See the Pen Progress Tag - example 3 by kenjiwilkins (@kenjiwilkins) on CodePen.

Conclusion

Progressタグを使わずに<div>のwidthを更新したりよりはるかに楽に実装できると思います。

追記

• mouse, touch両方に対応できるようにPointerEvent - Web API | MDNを使うように例を修正しました。