Advent of CSS / 06 

Tags :

I discovered the Advent of CSS 2021 a bit late, but decided to give it a try anyway. This entry was retro-posted.

Day 06 / Range slider

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

A pink slider with the price displayed above in golden numbers
The Range Slider brief

See the Pen Advent of CSS 2021 / 06 by David Roessli (@davidroessli) on CodePen.


I had no idea how to style the right side only of the thumb slider, and it turns out it can only be done in Firefox with ::-moz-range-progress.

Plain HTML and CSS used.

Posted a response ? — Webmention it

This site uses webmentions. If you've posted a response and need to manually notify me, you can enter the URL of your response below.

Want more ? — prev/next entries