1.0.1 • Published 6 years ago
@lighthouseapps/react-native-range-slider v1.0.1
react-native-range-slider
React Native Range Slider for Android and iOS
Getting started
$ npm i @lighthouseapps/react-native-range-slider --save
$ react-native link @lighthouseapps/react-native-range-slider
Usage
import RangeSlider from '@lighthouseapps/react-native-range-slider';
<RangeSlider {PROPERTIES} />Properties
| Property | Description | Type | Default Value |
|---|---|---|---|
| onValueChanged | A callback to be called when value was changed.(lowValue, highValue, fromUser) => {}fromUser parameter is true if the value was changed because of user's interaction (not by setting lowValue or highValue properties). Just like android's OnSeekbarChangeListener. | Function | 4 |
| rangeEnabled | Slider works as an ordinary slider with 1 control if false | Boolean | true |
| lineWidth | Width of slider's line | Number | 4 |
| thumbRadius | Radius of thumb (including border) | Number | 10 |
| thumbBorderWidth | Border width of thumb | Number | 2 |
| textSize | Size of label text | Number | 16 |
| labelBorderWidth | Border width of label | Number | 2 |
| labelPadding | Padding of label (distance between border and text) | Number | 4 |
| labelBorderRadius | Border radius of label bubble | Number | 4 |
| labelTailHeight | Height of label bubble's tail | Number | 8 |
| labelGapHeight | Gap between label and slider | Number | 4 |
| textFormat | This string will be formatted with active value and shown in thumb | String"Price: %d" =>"Price: 75"if the current value is 75 | %d (just the number) |
| labelStyle | Style of the label.Label is not shown if none | StringCurrently supported values:- none- bubble | bubble |
| gravity | Vertical gravity of drawn content | StringCurrently supported values:- top- bottom- center | top |
| selectionColor | Color of selected part | String(#RRGGBB or #AARRGGBB) | #4286f4 |
| blankColor | Color of unselected part | String(#RRGGBB or #AARRGGBB) | #7fffffff |
| thumbColor | Color of thumb | String(#RRGGBB or #AARRGGBB) | #ffffff |
| thumbBorderColor | Color of thumb's border | String(#RRGGBB or #AARRGGBB) | #cccccc |
| labelBackgroundColor | Color label's background | String(#RRGGBB or #AARRGGBB) | #ff60ad |
| labelBorderColor | Color label's border | String(#RRGGBB or #AARRGGBB) | #d13e85 |
| labelTextColor | Color label's text | String(#RRGGBB or #AARRGGBB) | #ffffff |
| min | Minimum value of slider | Number (integer) | 0 |
| max | Maximum value of slider | Number (integer) | 100 |
| step | Step of slider | Number (integer) | 1 |
| lowValue | Current value of lower thumb | Number (integer) | 0 |
| highValue | Current value of higher thumb | Number (integer) | 100 |