Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Interactive Pricing Component using Blazor WASM

Mark Lawrence• 30

@marklnz

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my solution for the interactive pricing component, it's built using Blazor WebAssembly, and uses no hand coded JS at all.

I'm interested in general feedback about my HTML & CSS, and if anyone happens to be curious about Blazor, I'm happy to answer questions on that if I can.

Community feedback

Bashar Khdr• 930

@BasharKhdr1992

Posted

Nice solution. Congratulations. May I ask how do you set the steps like you did in your app ?

0

Mark Lawrence• 30

@marklnz

Posted

@BasharKhdr1992 Thanks very much for your feedback!

The way I got the steps working is to use the <input type="range"> HTML element, and provide it with a max and min value, as well as a value for the step attribute.

I set max to 5, min to 1 and step to 1. That gave me 5 steps, including the start and end positions.

1
Bashar Khdr• 930

@BasharKhdr1992

Posted

@marklnz Thank you for your clarification. Happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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