A touch-friendly color picker based on Material-UI that supports both HSL and RGB color models.

Installation

Just download the library from npm.

Using npm

npm install @igloo_cloud/material-ui-color-sliders --save

Using Yarn

yarn add @igloo_cloud/material-ui-color-sliders

Usage

In order to use this library you will need to import each of the sliders separately and wrap them in either a <HSLSliderProvider /> or <RGBSliderProvider /> component.

import React from "react";
import {
  HSLSliderProvider,
  HueSlider,
  SaturationSlider,
  LightnessSlider,
} from "material-ui-color-sliders";

export default () =>
  <HSLSliderProvider>
    <HueSlider />
    <SaturationSlider />
    <LightnessSlider />
  </HSLSliderProvider>

Components requiring <HSLSliderProvider />:

• <HueSlider />
• <SaturationSlider />
• <LightnessSlider />

Components requiring <RGBSliderProvider />:

• <RedSlider />
• <GreenSlider />
• <BlueSlider />

Available props

HSLSliderProvider

| Name | Type | Default | Description | | ------------- | ------- | ------------- | --------------------------------------------------------------------------------------------------------- | | defaultValues | array | [0, 1, 0.5] | Sets the initial value of the slider. | | onChange | func | () => {} | Callback function that is called when the value of one of the sliders contained in the component changes. |

RGBSliderProvider

| Name | Type | Default | Description | | ------------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------- | | defaultValues | array | [127, 127, 127] | Sets the initial value of the slider. | | onChange | func | () => {} | Callback function that is called when the value of one of the sliders contained in the component changes. |

RedSlider, GreenSlider, BlueSlider, HueSlider, SaturationSlider and LightnessSlider

| Name | Type | Default | Description | | ----------------- | -------- | ---------- | ----------------------------------------------------------------------- | | onChange | func | () => {} | Callback function that is called when the value of the slider changes. | | onChangeCommitted | func | () => {} | Callback function that is called when the mouseup event is triggered. | | style | object | {} | Style applied to the root class of the component. |

Try it out

Just clone this repository and run the following commands to open a live demo:

Using npm

cd example
npm start

Using Yarn

cd example
yarn start