Any slider demos with graphs?

[magician11]

This is by far the best slider I have found for my project. I'm looking at adding a histogram similar to the way Airbnb has it

Any demos I've missed? Or any tips on how to implement this? Or recommended graphing libraries?

Thanks.

[sghall]

Hey there. It would be great to have a demo like that but that's not something that has come up before. Should be pretty doable.

I don't think I would use another library for the that if it's just a bar chart. Most of those libraries are pretty bulky and you can just render the SVG with some odds and ends from D3.

Here's a simple responsive bar chart in a sandbox:
https://codesandbox.io/s/simple-bar-chart-f95lh

It needs some clean up but hopefully that helps. I think you just need setup the layout with the slider and grey out the bars that are outside the range but I'm not sure exactly how you want it to work.

[sghall]

Also, if you want it to animate as the data is changing, that sandbox is based off a demo I did for react-move. You can see it here https://react-move.js.org/#/demos/node-group

[magician11]

Thanks @sghall Your responsive bar chart, especially with the react-move demo, looks great!

For now I'm using react-chartjs-2.

I'll have a think about creating an Airbnb style demo with the demos you listed. Apart from a smaller build size, I like the idea of compound components a lot, even if it requires a bit more thought in how to render everything.

[magician11]

@sghall I tried a few different chart libraries including https://github.com/recharts/recharts and your demo, but was struggling to get them to do what I wanted exactly.

I ended up using react-chartjs-2 to create a very similar functional demo to the Airbnb screenshot above:

https://codesandbox.io/s/rangeslider-with-histogram-voos8

[sghall]

Awesome. Looks pretty good to me. You going to keep that sandbox stable? Can I link to it in the readme?

[magician11]

Yes I'll keep it stable.

I've noticed the codesandbox URL takes a long time to load. Not sure if you find that too? Happy to migrate the code to somewhere else if that is helpful.

[sghall]

Nice. Alrighty, link has been added to the readme. Also, linked to this issue so people can see the full discussion. Thanks!

I wouldn't worry about the load time....codeSandbox is free and everyone knows it's not super fast.

[zaszab]

I think this is the exact range slider opensourced by AirBnb: https://github.com/airbnb/rheostat

[siddhijain47]

Thanks @sghall Your responsive bar chart, especially with the react-move demo, looks great!

For now I'm using react-chartjs-2.

I'll have a think about creating an Airbnb style demo with the demos you listed. Apart from a smaller build size, I like the idea of compound components a lot, even if it requires a bit more thought in how to render everything.

Hi @magician11
From where I can get the code of above bargraph with slider using react-chartjs-2 ?

[magician11]

@siddhijain47 It's a screenshot from an internal system I built for a company. If you have any specific questions on it, I can see about sharing snippets of code.