@inthepocket/itp-rcc-slider NPM

ITP Slider component

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

$ npm install @inthepocket/itp-rcc-slider

Import

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

JSX

<Slider values={[3]} />

<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

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 {}

$ npm install

$ npm run test

Compiles the TypeScript source to ES5.

$ npm run build

7 years ago

7 years ago