codepens/hsl-slider-w-react-css-vars/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!