tri-slider React component
A React component of a three-way slider.
If three parts need to be balanced, it can be convenient to use this slider.
| 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.
``jsx
import Slider from 'tri-slider';
render(
document.querySelector('#root')
);
`
`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(
``
[npm-badge]: https://img.shields.io/npm/v/tri-slider.png?style=flat-square
[npm]: https://www.npmjs.org/package/tri-slider