Any slider demos with graphs?

Question

Any slider demos with graphs?

magician11 opened this issue 6 years ago · 10 comments

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.

Answer 1 · 2019-05-21T06:58:25.000Z

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.

Answer 2 · 2019-05-21T07:00:12.000Z

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

Answer 3 · 2019-05-22T12:01:47.000Z

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.

Answer 4 · 2019-05-24T11:12:10.000Z

@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

Answer 5 · 2019-05-25T19:19:17.000Z

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

Answer 6 · 2019-05-26T09:45:02.000Z

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.

Answer 7 · 2019-05-29T03:52:53.000Z

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.

Answer 8 · 2020-01-22T12:00:04.000Z

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

Answer 9 · 2023-01-03T09:36:10.000Z

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 ?

Answer 10 · 2023-01-03T14:42:21.000Z

@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.