ITP Slider component

A simple slider component based on react-compound-slider.

Usage

$ npm install @inthepocket/itp-rcc-slider

Import

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

JSX

<Slider values={[3]} />

API documentation

Slider

<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 | - | - | - | | left | Boolean value to control whether the left most track is included in the tracks array. 1 | boolean | true | - | | right | Boolean value to control whether the right most track is included in the tracks array. 1 | boolean | true | - | | prefixCss | Prefix for css classNames | string | 'slider' | No | | styles | imported css module (if passed, prefixed classNames will be disabled), see styles property | Object | null | No |

1 See react-compound-slider Tracks docs

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:

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

Development

Installation

$ npm install

Test

$ npm run test

Build

Compiles the TypeScript source to ES5.

$ npm run build