How well does Astro work with other libraries like MUI & Tailwind?

[Oceanestars]

Hi!
I was looking to see if Astro had a range slider. I couldn't find one. It's fairly easy to create our own but then it made me think how well does Astro work with other libraries(MUI has a decent range slider). I'd assume it's fairly independent but once in a while I'll have things conflict with each other so I wanted to check in here. (TL;DR has anyone run into issue using Astro & MUI or other component library)

Also, is a range slider coming in a near future 👀? Thanks!

[micahjones13]

Hey @Oceanestars, great questions!
We do actually have a slider, here's the storybook story for it: https://astro-components.netlify.app/?path=/story/forms-slider--default-story. Does that fit your needs? If not, what is it missing? We'd love to improve it.
We actually do have a Tailwind theme and a MUI theme. The MUI theme hasn't hit 1.0 yet, but is still usable and under active development.
We have a few other themes that I'll throw here just in case they're helpful:

• Material Themes
• AG Grid
• Grafana - this has been submitted to be a public Grafana plugin and is currently under review by the Grafana team.

[Oceanestars]

Hi! Thanks for the quick response :)
The range slider would be something more like this: https://mui.com/material-ui/react-slider/#range-slider
if I wanted to only have data point between 10 - 30 the range slider would be ideal.

Oh good to know! I was wondering more on a component level. So like let's go with the range slider, and I was using an Astro react table. And the two were in the same component or one was a child/parent.

(Also in this ppt: https://s3-us-west-2.amazonaws.com/com.rocketcom.astrouxds/downloads/fds-wireframes.pdf slide 26, where is that chart from?)

[micahjones13]

Ah okay, that makes more sense as far as the range slider goes. We've got that type of range slider on our roadmap as well, and I'll make sure to bring it up as a larger priority so we can get it to you.

Could you explain more about the component level question? As in, you're using a MUI range slider inside an Astro react table?

I'm not entirely sure where that graph is from, I'll have to ask the team. We have been doing a lot of data visualization work (it's part of our program increment objectives this year) and have an example that you might be interested in. This is a sample app of a GRM dashboard, and the dev team that built it did so using Astro data viz colors and chart.js. We'll hopefully release something more substantial on that front here soon.

[micahjones13]

@Oceanestars With version 7.15 we've released our dual range slider! Hopefully this will help with your range slider needs. Let us know if you have any feedback.