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 |