Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any slider demos with graphs? #85

Closed
magician11 opened this issue May 17, 2019 · 10 comments
Closed

Any slider demos with graphs? #85

magician11 opened this issue May 17, 2019 · 10 comments

Comments

@magician11
Copy link

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

Screen Shot 2019-05-17 at 2 45 46 PM

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

Thanks.

@sghall
Copy link
Owner

sghall commented May 21, 2019

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
Copy link
Owner

sghall commented May 21, 2019

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
Copy link
Author

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

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

Screen Shot 2019-05-21 at 1 05 32 PM

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
Copy link
Author

@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
Copy link
Owner

sghall commented May 25, 2019

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

@magician11
Copy link
Author

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
Copy link
Owner

sghall commented May 29, 2019

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.

@sghall sghall closed this as completed May 29, 2019
@zaszab
Copy link

zaszab commented Jan 22, 2020

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

@siddhijain47
Copy link

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

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

Screen Shot 2019-05-21 at 1 05 32 PM

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants