# react-two-thumb-input-range

> Accessible two thumb input range component for React that implements

Latest version **1.0.7** (published 2021-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-two-thumb-input-range
pnpm add react-two-thumb-input-range
yarn add react-two-thumb-input-range
bun add react-two-thumb-input-range
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-03-24 |
| First published | 2021-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 352.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alican Erdurmaz |
| Maintainers | alicanerdurmaz |
| Keywords | react, component, slider, accessible, a11y slider, react a11y slider, react accessible slider, react slider, a11y, input range, react aria slider, aria, aria slider |

## Links

- npm: https://www.npmjs.com/package/react-two-thumb-input-range
- Homepage: https://github.com/alicanerdurmaz/react-two-thumb-input-range
- npm.io page: https://npm.io/package/react-two-thumb-input-range

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2021-03-24
- 1.0.6 — 2021-03-24
- 1.0.5 — 2021-03-24
- 1.0.4 — 2021-03-24
- 1.0.3 — 2021-03-24
- 1.0.2 — 2021-03-24
- 1.0.1 — 2021-03-24
- 1.0.0 — 2021-03-24

## README

# react-two-thumb-input-range

`TwoThumbInputRange` is a React component allowing users to input numeric values within a specific range.

Native HTML input type=range sliders do not support multiple thumbs yet so this component uses two range inputs and position them to look like a multi-thumb slider.

Under the hood `TwoThumbInputRange` uses HTML input type=range, but uses CSS Magic to allows users to adjust with 2 buttons

# Features

- [x] Multi-Touch support
- [x] Accessible with ARIA and keyboard support
- [x] Highly Customizable
- [x] Written in TypeScript

# Examples

All examples available in [Storybook](https://alicanerdurmaz.github.io/react-two-thumb-input-range/?path=/story/two-thumb-input-range-custom-css--input-range)

[Live Web App](https://alicanerdurmaz.github.io/react-two-thumb-input-range/?path=/story/two-thumb-input-range-custom-css--input-range)

# Installation

```sh
yarn add react-two-thumb-input-range

# or

npm i react-two-thumb-input-range

```

## Import components

```js
import { TwoThumbInputRange } from "react-two-thumb-input-range"
```

## Usage

```jsx
function App() {
  const [value, setValue] = useState([1000, 4333])

  const onValueSChange = (values) => {
    setValue(values)
  }

  return <TwoThumbInputRange onChange={onValueChange} values={value} min={1000} max={10000} />
}
```

# Props

| Attribute       |         Type          |  Default  | Description                                                                                                                        |
| :-------------- | :-------------------: | :-------: | :--------------------------------------------------------------------------------------------------------------------------------- |
| min             |       `number`        |     0     | The minimum permitted value.                                                                                                       |
| max             |       `number`        |    100    | The maximum permitted value.                                                                                                       |
| values          |   `[number,number]`   |           | The current value of the Input Range.                                                                                              |
| onChange        |        `func`         |           | Callback function that is fired when the Input's value changed. onChange: ([number, number]) => void                               |
| railColor       |       `string`        | `#EDF2F7` | Color of rail element.                                                                                                             |
| trackColor      |       `string`        | `#1976d2` | Color of track element.                                                                                                            |
| thumbColor      |       `string`        | `#EDF2F7` | Color of thumb element.                                                                                                            |
| thumbStyle      | `React.CSSProperties` | `1976d2`  | Styles applied to the thumb element                                                                                                |
| thumbFocusStyle | `React.CSSProperties` |    ``     | Styles applied to the when thumb element focus                                                                                     |
| inputStyle      | `React.CSSProperties` |    ``     | Styles applied to the input element                                                                                                |
| labelStyle      | `React.CSSProperties` |    ``     | Styles applied to the label element                                                                                                |
| labelTextStyle  | `React.CSSProperties` |    ``     | Styles applied to the label textelement                                                                                            |
| showLabels      |       `boolean`       |  `true`   | If false, the default labels will not render.                                                                                      |
| ariaValueText   |       `string`        |           | [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) |

---
_Source: https://npm.io/package/react-two-thumb-input-range · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._