範囲指定が可能なスライダーjQueryプラグイン7選

最小値と最大値を指定するタイプのスライダーを実装できるjQueryプラグインを7点ご紹介します。
価格や面積など、最小値と最大値を指定して検索するようなフォームを使う場合に設置してみたくなります。

将来的にはinput[type]でこのようなスライダーを実装できるようになりそうですが、当分はjQueryに頼る必要がありそうです。

ちなみにこのようなスライダーを英語では「Range Slider」と呼ぶそうです。ググるときに使ってみてください。

AD

noUiSlider

設置方法

おすすめポイント

・direction: "rtl"を指定することで右側を小さな値に、左側を大きな値にすることができます。
・レスポンシブ対応

rangeslider.js

設置方法

おすすめポイント

・レスポンシブ対応

jQRangeSlider

設置方法

おすすめポイント

・日付にも対応している
・見た目がかっこいい

イマイチなポイント

・jQuery UIが必要

jRange

設置方法

おすすめポイント

・オプションが少なく設置が簡単

jquery.nstSlider.js

設置方法

イマイチなポイント

・HTMLが複雑

jQuery Slider plugin

設置方法

おすすめポイント

・レスポンシブ対応

jQuery UI Slider ウィジェット

jQuery UI標準のウィジェットです。

設置方法

まとめ

スライダーで値を指定させるフォームは一見すると直感的っぽく見えますが、厳密な値を指定したい場合は扱いづらいものです。
スライダーと入力フォームを併記するなどの工夫をしつつ使っていきたいですね。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。