# react-motion-slider-input

> A slider input component for react

Latest version **0.8.1** (published 2017-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-motion-slider-input
pnpm add react-motion-slider-input
yarn add react-motion-slider-input
bun add react-motion-slider-input
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.1 |
| Published | 2017-09-07 |
| First published | 2016-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Tomi Saarinen |
| Maintainers | rohea |

## Links

- npm: https://www.npmjs.com/package/react-motion-slider-input
- Repository: https://github.com/Rohea/react-motion-slider-input
- Homepage: https://github.com/Rohea/react-motion-slider-input#readme
- Issues: https://github.com/Rohea/react-motion-slider-input/issues
- npm.io page: https://npm.io/package/react-motion-slider-input

## Dependencies (1)

- [immutable](https://npm.io/package/immutable.md) >=3.8.0 <4.0.0

## Recent versions

- 0.8.1 (latest) — 2017-09-07
- 0.8.0 — 2017-07-03
- 0.7.0 — 2017-06-07
- 0.6.0 — 2017-06-06
- 0.5.0 — 2017-06-06
- 0.4.0 — 2017-01-24
- 0.3.1 — 2017-01-24
- 0.3.0 — 2017-01-21
- 0.2.1 — 2016-09-14
- 0.2.0 — 2016-09-14
- 0.1.0 — 2016-09-14

## README

# React-Motion-Slider-Input

A React library/plugin for creating highly customizable input sliders. Uses React-Motion for nice animations.

### Install

Make sure React and React-Motion are installed

- `npm install --save react`
- `npm install --save react-motion`

Install this library

- `npm install --save react-motion-slider-input`

Link css to your project from `lib/SliderInput.css` and create your own styles. Please notice this css is here only for reference.
It is highly recommended to create your own styles that match the design of the website or application you are building.

### Dependencies

- React.js (peer dependency)
- React-Motion (peer dependency)
- Immutable.js

### Usage

```
import { SliderInput } from 'react-motion-slider-input';

... other code ...

render() {
  return (
    <SliderInput />
  );
}
```

### Properties

| Name          | Type                    | Default                                          | Description                                                                                                                                                                                                             |
|---------------|-------------------------|--------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| orientation   | string                  | horizontal                                       | toggle between horizontal and vertical orientation                                                                                                                                                                      |
| step          | number                  | 1                                                | step size                                                                                                                                                                                                               |
| min           | number                  | 1                                                | minimum value                                                                                                                                                                                                           |
| max           | number                  | 10                                               | maximum value                                                                                                                                                                                                           |
| value         | number                  | 1                                                | shorthand for setting up one handle with an initial value                                                                                                                                                               |
| range         | bool or string          | false                                            | shorthand for setting up a range, set `true` or `below` to generate range between min value and handle, set `above` to generate a range between handle and max value                                                    |
| steps         | bool or arrayOf(object) | null                                             | set as `true` to generate steps of size `step` between values `min` and `max`, provide an array of objects of shape `{ label: string, id: string, value: number or string, className: string}` to generate custom steps |
| handles       | arrayOf(object)         | null                                             | provide an array of objects of shape `{value: number or string, id: string, label: string, className: string}`                                                                                                          |
| ranges        | arrayOf(object)         | null                                             | provide an array of objects of shape `{id: string, label: string, fromHandle: number, className: string, includeHandles: bool}`                                                                                         |
| onChange      | func                    | undefined                                        | callback when value changes                                                                                                                                                                                             |
| onMove        | func                    | undefined                                        | callback when handle is being moved                                                                                                                                                                                     |
| disabled      | bool                    | false                                            | prevent moving any handles of the slider                                                                                                                                                                                |
| className     | string                  | null                                             | define a root class for the slider element for custom css styling                                                                                                                                                       |
| spring        | object                  | { stiffness: 1000, damping: 40, precision: 0.01} | override react-motion spring config                                                                                                                                                                                     |
| detailedValue | bool                    | false                                            | return a detailed data object in `onChange` for simple single-value sliders to enable consistent behaviour with complex sliders that return a detailed value automatically                                              |

### Examples

See example folder.

### FAQ

Q: A slider plugin, U serious?

A: We figured world desperately needs yet another slider plugin. I mean, there are barely 5 for React already. That's way too few. Seriously though, this slider tries to provide some functionality that we felt is missing from the others.

Q: It looks ugly. Why?

A: The idea is to include as little forced styles as possible to make it possible for you to create your own styles.

Q: Why no tests?

A: No good reason, we should definitely have some before developing this thing any further.

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