Skip to content
Submitted over 3 years ago

Pricing Slider Using HTML, CSS, and Vanilla Javascript.

Jon Bailey•70
@Jon-Bailey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive pricing component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

The background fill on the slider input disappears when interacting using a mouse. Mobile/Tablet version works fine in Developer Tools.

Open to suggestions on how to fix. Any Feedback is appreciated! Thanks!

Community feedback

  • Account deleted

    One thing I noticed is that the 25% discount doesn't get applied when you click on the toggle, and the pageviews also do not change as you pull the slider.

    2
  • Nam HaÏ•820
    @Nam-HaiPosted over 3 years ago

    The overall design is on point.

    However, the interactivness of the site is poor.

    The "Yearly Billing" could also change the price presented, taking into account the discount.

    The slider change the price; that's good, but it could/should change the numbers of pageviews.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord