react-color-sliders
v1.0.1
Published
Color range slider components for React for picking colors on a scale
Downloads
8
Readme
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