ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5で追加されたフォーム入力の一つにレンジがあります。一定の決められた範囲について値を自由に選べるコンポーネントです。便利ではありますが、まだ利用されているケースは多くないように思います。

そんなレンジ入力を格好良くアレンジしてくれるスタイルシート設定ツールがrange.cssです。

range.cssの使い方

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

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

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

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

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

danielstern/range.css

range.css - generate styles for your HTML5 range inputs

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2