react-slider-color-picker

A react color picker consisting of a set of sliders for adjusting hue, saturation, lightness and alpha.

Demo

Here is a demo application to showcase the color picker: https://osandell.github.io/dala-horse-designer/

Install

npm install --save react-slider-color-picker

Usage

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}/>
    <>
  )
}

License

MIT © Olof Sandell