1.1.2 • Published 5 years ago
tri-slider v1.1.2
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
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
Basic (uncontrolled)
import Slider from 'tri-slider';
render(
<Slider onChange={e => console.log(e)} />,
document.querySelector('#root')
);Controlled
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 (
<div>
<h1>tri-slider Demo</h1>
<button
onClick={() => {
this.setState({ threeWay: !this.state.threeWay });
}}
>
toggle Three-way
</button>
<Slider
isThreeWay={this.state.threeWay}
onChange={e => {
this.setState({ value: e });
}}
value={this.state.value}
/>
</div>
);
}
}
render(<Demo />, document.querySelector('#demo'));