# @inthepocket/itp-rcc-slider

> ITP Slider component

Latest version **0.0.2** (published 2019-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @inthepocket/itp-rcc-slider
pnpm add @inthepocket/itp-rcc-slider
yarn add @inthepocket/itp-rcc-slider
bun add @inthepocket/itp-rcc-slider
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-04-29 |
| First published | 2019-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ITP Agency NV |
| Maintainers | bram.lemenu, brecht, ddavy, easybird, itpit, jonasdegeest, onomanatee, swaer, thibmaek |
| Keywords | react, itp, component, slider |

## Links

- npm: https://www.npmjs.com/package/@inthepocket/itp-rcc-slider
- npm.io page: https://npm.io/package/@inthepocket/itp-rcc-slider

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-compound-slider](https://npm.io/package/react-compound-slider.md) ^1.2.1

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

- 0.0.2 (latest) — 2019-04-29
- 0.0.1 — 2019-04-29

## README

# ITP Slider component
A simple slider component based on [react-compound-slider](https://github.com/sghall/react-compound-slider/).

## Usage
```
$ npm install @inthepocket/itp-rcc-slider
```

Import
```javascript
import Slider from '@inthepocket/itp-rcc-slider';
```

JSX
```jsx
<Slider values={[3]} />
```

## API documentation
### Slider
```jsx
<Slider
  values={[3]}
  domain={[0, 10]}
  step={1}
  onChange={values => console.log(values)}
  right={false}
/>
```

| Property                       | Description                                                                                                      | Type          | Default   | Required |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------- | --------- | -------- |
| ...slider props                | See [react-compound-slider slider docs](https://sghall.github.io/react-compound-slider/#/component-api/slider)   | -             | -         | -        |
| left                           | Boolean value to control whether the left most track is included in the tracks array. <sup>1</sup>               | boolean       | true      | -        |
| right                          | Boolean value to control whether the right most track is included in the tracks array. <sup>1</sup>              | boolean       | true      | -        |
| prefixCss                      | Prefix for css classNames                                                                                        | string        | 'slider'  | No       |
| styles                         | imported css module (if passed, prefixed classNames will be disabled), see [styles property](#styles-property)   | Object        | null      | No       |

<sup>1</sup> See [react-compound-slider Tracks docs](https://sghall.github.io/react-compound-slider/#/component-api/tracks)

#### Styles property
| Property           | Description | Type   | Default | Required |
| ------------------ | ----------- | ------ | ------- | -------- |
| Slider             | -           | string | -       | Yes      |
| Rail               | -           | string | -       | Yes      |
| Track              | -           | string | -       | Yes      |
| Handle             | -           | string | -       | Yes      |
| isHandleActive     | -           | string | -       | No       |

The css module should look like this:

```css
.Slider {}
.Rail {}
.Track {}
.Handle {}
.isHandleActive {}
```

## Development
### Installation
```
$ npm install
```

### Test
```
$ npm run test
```

### Build
Compiles the TypeScript source to ES5.

```
$ npm run build
```

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