Material-UI Color Sliders
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 --saveUsing Yarn
yarn add @igloo_cloud/material-ui-color-slidersUsage
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 startUsing Yarn
cd example
yarn start