12 lines
635 B
Markdown
12 lines
635 B
Markdown
|
# HSL Slider w/ React + CSS vars 🤓🎨
|
||
|
|
_A Pen created at CodePen.io. Original URL: [https://codepen.io/jh3y/pen/dybjLpa](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](https://dribbble.com/jok3).
|
||
|
|
|
||
|
|
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!
|