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

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'));