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

こんにちは。nap5です。

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

Airbnb

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

range-slider

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

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

デモサイトです。

デモコードです。

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

簡単ですが、以上です。

• WEB