react-color-sliders
React components for picking a color on a scale
Install
npm install --save react-color-sliders
Usage
import * as React from 'react' import { HueSlider, SaturationSlider, LightnessSlider, RedHueSlider, ShadeLightnessSlider,} from 'react-color-sliders' class Example extends React.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 */} <HueSlider hue={number} saturation={number} lightness={number} onChange={(hue: number) => {}} /> {/* This has a smaller domain of redish colors */} {/* works for any other rainbow color */} <RedHueSlider hue={number} saturation={number} lightness={number} onChange={(hue: number) => {}} /> <SaturationSlider hue={number} saturation={number} lightness={number} onChange={(saturation: number) => {}} /> <LightnessSlider hue={number} saturation={number} lightness={number} onChange={(lightness: number) => {}} /> {/* Smaller domain of lightness for colors on the darker side */} {/* works for tints and tones too */} <ShadeLightnessSlider hue={number} saturation={number} lightness={number} onChange={(lightness: number) => {}} /> </React.Fragment> ) }}
License
MIT © Hermanya