Interactive pricing component

Table of contents

• The challenge
• What I learned
• Links

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Use the slider and toggle to see prices for different page view numbers

What I learned

That was one of the hardest challenges I had to take, implementing an accessible slider and customizing it was fairly hard. I used the 'output' tag for both -page views- and -months- to ensure that any changes happen when the slider moves the values will be displayed.

To customize the slide I had to add a couple of layouts on top of <input type=range> and make it transparent.

When it comes to style I tried to use both regular CSS (for the general style) and CSS modules (for styling components), I had to add some Webpack configuration to use both.

I would like to add some animation using Framer Motion. I am still new to React so maybe my current solution isn't the best, I will add some changes in the future while I still learning and practicing.

Some resources that helped me in this challenge:

• Creating an Accessible Range Slider with CSS.
• Accessible slider codepen

Links

• Live Site URL: Add live site URL here

Made with 💖 by ZINEB