簡単なスライダを作った

スライダを使いたかったので適当に作ってみた。

• DIV要素一つでそれなりに見えるように。:before便利。
• なるべくフォントサイズに依存しないように。
• 値は練習も兼ねてdata-*属性を使うように。element.datasetは一部でしか使えないので、とりあえずsetAttributeで値をセットするだけ。属性に値を入れておけばcontent:attr(data-*)みたいな感じでその値を表示できるメリットも。
• tabIndexを指定してフォーカスを受け付けるように。ついでにキーボードでも値を増減されたりできるように。キーバインドは適当。
• 最大値とか最小値とかを設定するのは面倒なので、ピクセル幅==値としてしまい、最大値とかの制限をかけたければ変換関数を使えばいいように。他のライブラリではライブラリ側でやっていることを自分でやるようにしただけとも。