Pocket

数値の範囲を指定するレンジスライダーが簡単に実装できるjQueryプラグイン「noUiSlider」。レスポンシブにも対応しています。
ある案件でデザインを再現するにあたりカスタマイズする必要があったので、今回はそのカスタマイズした内容をご紹介します。
デモはこちら

カスタマイズした内容は主に以下の2点です。

  • スライダーのつまみをドラッグしている時、現在の数値を吹き出しで表示する
  • 最大値を「∞」にする

実際のコードは以下です。

html

css

js

いかがでしょうか?価格やサイズの絞り込みなど、ECサイト等に使える表現かと思いますので、ぜひご活用ください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。