@igloo_cloud/material-ui-color-sliders NPM

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.