Install

npm install --save react-color-sliders

Usage

import*asReactfrom'react'import{HueSlider,SaturationSlider,LightnessSlider,RedHueSlider,ShadeLightnessSlider,}from'react-color-sliders'classExampleextendsReact.Component{render(){return(<React.Fragment>{/* Rainbow slider example */}{/* to control the slider provide onChange/onUpdate */}{/* more info on props: https://sghall.github.io/react-compound-slider/#/getting-started/tutorial */}<HueSliderhue={number}saturation={number}lightness={number}onChange={(hue:number)=>{}}/>{/* This has a smaller domain of redish colors */}{/* works for any other rainbow color */}<RedHueSliderhue={number}saturation={number}lightness={number}onChange={(hue:number)=>{}}/><SaturationSliderhue={number}saturation={number}lightness={number}onChange={(saturation:number)=>{}}/><LightnessSliderhue={number}saturation={number}lightness={number}onChange={(lightness:number)=>{}}/>{/* Smaller domain of lightness for colors on the darker side */}{/* works for tints and tones too */}<ShadeLightnessSliderhue={number}saturation={number}lightness={number}onChange={(lightness:number)=>{}}/></React.Fragment>)}}

License