コーディング /

jQueryプラグイン「noUiSlider」をカスタマイズしよう!

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

カスタマイズした内容は主に以下の2点です。
  • スライダーのつまみをドラッグしている時、現在の数値を吹き出しで表示する
  • 最大値を「∞」にする

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

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

この記事を書いた人

永渕百合子

PAGE TOP