multicolorslider

Multi-color slider implemented in ReactJS. Configurable number of segments and colors!

Install

npm i multicolorslider

Run locally

To run the example App locally:

npm install
npm run build
npm start

Open localhost:2222.

Usage

import ColorSlider from 'multicolorslider'

<ColorSlider
  min={Number}
  max={Number}
  name={String}
  thresholds={Array}
  colors={Array}
  onChange={Function}
/>

Props

Prop | Type | Default | Description --------- | ------- | ------- | ----------- min | number | | minimum value on the slider max | number | | maximum value on the slider name | string | | name of the slider thresholds | array | [] | array of thresholds with array [0] == min and array[length -1] == max colors | array | [] | array of color codes, each representing a color segment on the slider in a sequence. The array length is equal to the thresholds array length - 1 onChange | function | | call back function whenever slider changes a value/threshold

License

Please check the LICENSE file.