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