tri-slider

A React component of a three-way slider.

When to use

If three parts need to be balanced, it can be convenient to use this slider.

Demo

Click here

Props

| Prop | Type | args | Description |
| --------------- | ---------- | ------- | ---------------------------------------------------------------- |
| knob | node | | Component or element to use for the knob. |
| size | number | | The width of the element. Excluding 10px margin. |
| backgroundColor | string | | The color of the triangle. |
| style | object | | The style of the parent of the triangle. |
| isThreeWay | bool | | A toggle between a two way and three way slider. |
| onChange | function\* | [A,B,C] | Fires while the element is being changed. |
| value | array | | The value of the slider components. [A,B,C] Should add up to one |
| labelA | function | A | The text on the label of angle A |
| labelB | function | B | The text on the label of angle B |
| labelC | function | C | The text on the label of angle C |

> Note: "A" is left-bottom, "B" is right-bottom, "C" is (center-)top.

Example

$3

``jsx
import Slider from 'tri-slider';

render(
console.log(e)} />,
document.querySelector('#root')
);
`

$3

`jsx
import React, { Component } from 'react';
import { render } from 'react-dom';

import Slider from 'tri-slider';

class Demo extends Component {
state = {
threeWay: true,
value: [0.33, 0.33, 0.33],
};
render() {
return (


render(, document.querySelector('#demo'));
``

[npm-badge]: https://img.shields.io/npm/v/tri-slider.png?style=flat-square
[npm]: https://www.npmjs.org/package/tri-slider