こんにちわ。nap5です。

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

https://www.airbnb.jp/

Twitterにも投稿してみました。
https://twitter.com/napzak5/status/1574675768759631872

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

https://mui.com/material-ui/react-slider/#range-slider

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

https://d3js.org/

https://github.com/pbeshai/tidy

デモサイトです。

https://react-tailwind-airbub-price-range-filter.onrender.com/

デモコードです。

https://codesandbox.io/s/26i6ho?file=/pages/index.js

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

簡単ですが、以上です。