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

jQRangeSliderは日付や数値を範囲で絞り込む際に便利なスライダーライブラリです。

情報を絞り込んだり、データを登録する際には様々な入力方式が考えられます。今回はjQRangeSlider、範囲指定のスライダー入力コンポーネントを紹介します。


例です。


ドラッグして範囲を変更できます。


ぐぐっと移動。


左右の矢印で範囲は固定のまま移動させられます。


値を入力して変更もできます。


一気に逆まで。


細かなカスタマイズもできます。

jQRangeSliderはフローティング部分をドラッグして範囲を指定して、左右の矢印を使って範囲全体を移動できます。ホイールでの範囲指定もできます。iOSやAndroidでのタッチ操作もサポートしています。日付や数値の範囲指定に使うと便利そうです。

jQRangeSliderはjQuery/JavaScript製のオープンソース・ソフトウェア(GPL/MIT License)です。


MOONGIFTはこう見る

Webは自由度の高い割に標準で用意されているコンポーネントが貧弱です。WindowsやMac OSXなどの標準アプリの利用で慣れているユーザにとってはストレスが大きいでしょう。そこで独自のカレンダービューやツリービューなどのニーズがあります。

それ以外でもドロップダウンリストをチェックボックスでの選択対応にしたり、項目に画像を載せたりなど様々な入力インタフェースが求められます。ローカルのOSで実現している入力コンポーネントをWeb上で再現すると流行るのではないでしょうか。

jQRangeSlider: jQuery plugin for range sliders

ghusse/jQRangeSlider · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2