Range Slider With a Water Drop to show Progress Indicator that changes colour as you drag it

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
input field progress bar range slider
Image: Range Slider With a Water Drop to show Progress Indicator that changes colour as you drag it GIF

Here is a cool little range slider design that you all might like, it was designed by Brandon McConnell. When you click anywhere on the slider the progress is moved to that location and you get a water drop like interface with the percentage of progress, the colour of the progress bar and the percentage indicator is relative to the percentage it’s completed. In this example, it goes from blue to green but of course, you can customize that.

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

Percentage Label Progress Bar Snippet

See the Pen CSS Custom Range Slider by Brandon McConnell (@brandonmcconnell) 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.