0-200 Range Slider with Number Above Slider

Image: 0-200 Range Slider with Number Above Slider GIF

This is a modern minimal range slider by Marine Piette with a circle above the range indicator that shows the current number of the range as you slide it along. You can also click anywhere along the range slider to jump to that number.

If you are having trouble with the pen, try the archived copy on GitHub

Range Slider with Number Code Snippet

See the Pen Slider Range Mars Weight Calculator by Marine Piette (@mayuMPH) on CodePen.default

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.