0-200 Range Slider with Number Above Slider

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
minimalist range 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.