range.css - レンジ入力をレンジ入力を使ってカスタマイズ // MOONGIFT Archived

HTML5で追加されたフォーム入力の一つにレンジがあります。一定の決められた範囲について値を自由に選べるコンポーネントです。便利ではありますが、まだ利用されているケースは多くないように思います。そんなレンジ入力を格好良くアレンジしてくれるスタイルシート設定ツールがrange.cssです。

range.cssの使い方

カスタマイズもまたレンジでできる点が面白いです。

大きさ、丸みなどを変更した例。

色の変更もできます。CSSもダイナミックに書き換わります。

range.cssではレンジ入力を使ってスタイルシートを変更します。その結果生成されたスタイルシートを使えば、自分のサイトにあった格好良いレンジ入力が使えるようになるでしょう。

range.cssはJavaScript/スタイルシート製、2-clause BSD lisenceのオープンソース・ソフトウェアです。