@igloo_cloud/material-ui-color-sliders

1.0.9 • Public • Published

Igloo logo

Material-UI Color Sliders

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

Component screenshot

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

Readme

Keywords

none

Package Sidebar

Install

npm i @igloo_cloud/material-ui-color-sliders

Weekly Downloads

2

Version

1.0.9

License

MIT

Unpacked Size

122 kB

Total Files

7

Last publish

Collaborators

  • andreazanin
  • samueledassatti
  • igloo.ooo