A react color picker consisting of a set of sliders for adjusting hue, saturation, lightness and alpha.
Here is a demo application to showcase the color picker: https://osandell.github.io/dala-horse-designer/
npm install --save react-slider-color-picker
import React, { useState } from 'react'
import { HueSlider, SaturationSlider, LightnessSlider, AlphaSlider } from 'react-slider-color-picker'
interface Color {
h: number
s: number
l: number
a: number
}
const App = () => {
const [color, setColor] = useState<Color>({h: 180, s: 100, l: 50, a: 1})
const handleChangeColor = (newColor: Color) => {
setColor(newColor)
}
return (
<>
<HueSlider handleChangeColor={handleChangeColor} color={color} />
<SaturationSlider handleChangeColor={handleChangeColor} color={color} />
<LightnessSlider handleChangeColor={handleChangeColor} color={color} />
<AlphaSlider handleChangeColor={handleChangeColor} color={color}/>
<>
)
}
MIT © Olof Sandell