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