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

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.