History

Dym Sohin f132183c1d init		2023-10-06 23:12:53 +02:00
..
dist	init	2023-10-06 23:12:53 +02:00
src	init	2023-10-06 23:12:53 +02:00
README.markdown	init	2023-10-06 23:12:53 +02:00
license.txt	init	2023-10-06 23:12:53 +02:00

README.markdown

HSL Slider w/ React + CSS vars 🤓🎨

_A Pen created at CodePen.io. Original URL: https://codepen.io/jh3y/pen/dybjLpa.

Been reading through "Refactoring UI" (Great read!) and was inspired by the "Ditch Hex for HSL" section to create this HSL slider. The design was also inspired by something I saw on Dribble here.

The main input handles the hue, whilst the smaller ones handle saturation and lightness.

Built with React Hooks, pointer events and CSS variables 💪

UPDATE: 24/09/19 - Added a radial guide so it's clearer where the handles move

Enjoy!