# tri-slider

> tri-slider React component

Latest version **1.1.2** (published 2019-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install tri-slider
pnpm add tri-slider
yarn add tri-slider
bun add tri-slider
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-08-12 |
| First published | 2018-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 97.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | meesvandongen |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/tri-slider
- Homepage: https://gitlab.com/meesvandongen/tri-slider
- npm.io page: https://npm.io/package/tri-slider

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [almost-equal](https://npm.io/package/almost-equal.md) ^1.1.0

## Recent versions

- 1.1.2 (latest) — 2019-08-12
- 1.1.1 — 2018-09-25
- 1.0.10 — 2018-06-10
- 1.0.9 — 2018-04-24
- 1.0.8 — 2018-04-24
- 1.0.7 — 2018-04-24
- 1.0.6 — 2018-04-24
- 1.0.5 — 2018-04-23
- 1.0.4 — 2018-04-23
- 1.0.3 — 2018-04-23
- 1.0.2 — 2018-04-23
- 1.0.1 — 2018-04-23
- 1.0.0 — 2018-04-23

## README

# tri-slider

<!-- [![npm package][npm-badge]][npm] -->

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](https://meesvandongen.gitlab.io/tri-slider)

## 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)

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

render(
  <Slider onChange={e => console.log(e)} />,
  document.querySelector('#root')
);
```

### Controlled

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

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

---
_Source: https://npm.io/package/tri-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._