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