見出し画像

マルチレンジスライダーを使ってAirbnbのような価格帯グラフの絞り込み機能を実現してみよう〜tailwindcssを添えて〜

こんにちわ。nap5です。

マルチレンジスライダーを使ってAirbnbのような価格帯グラフの絞り込み機能を実現してみましたので、紹介したいと思います。



マルチレンジスライダーはMUIのものを今回部分的に使用しています。
マルチレンジスライダーの場合はバニラで書くとなるとカスタマイズが必要になるので、今回はポートしてきました。


こういう機能は結構大変なので、今回チャレンジしてみました。また、ダークモードにも対応してみました。


実現にあたり、d3tidyjsを使用しています。



デモサイトです。



デモコードです。


Airbnbはdivで書いていましたが、おそらくDnD関連のライブラリをうまくつかっているのでしょう。


簡単ですが、以上です。

いいなと思ったら応援しよう!