@lighthouseapps/react-native-range-slider

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	String Currently supported values: - none - bubble	bubble
gravity	Vertical gravity of drawn content	String Currently 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