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