Brief

In this project, we're going to create a range slider. As you move the knob, the dollar amount above will update.

Users should be able to:

  • Move the knob on the range and the dollar amount above it will update.


Need some support on this challenge? Upgrade to the Solution tier You'll get a video explanation, from Amy.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: Figma file, images, and a Style Guide

  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.

  3. Open the project's README.md file (that's this!). It has additional information on how the project is structured.

  4. Happy coding!

  5. Once you're finished, share your work using #adventofcss


Taking your Project to the Next Level

  • Use a framework or libraries like Tailwind CSS, Styled Components, or CSS Modules. Or, if you're feeling particularly adventurous, try writing everything in Vanilla CSS.

  • Add an animation on load, have the podcast list slide out from under the podcast artwork


FAQs

  • Can I use libraries/frameworks on these projects? 

    • Of course! We're providing the solution in vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.

  • Oh no! I'm stuck! 

  • Can I use this project in my portfolio? 

    • Sure! But, be honest about the work that you did