@lighthouseapps/react-native-range-slider

1.0.1 • Public • Published

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

Package Sidebar

Install

npm i @lighthouseapps/react-native-range-slider

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

61.9 kB

Total Files

17

Last publish

Collaborators

  • leosampc
  • marlonconstante
  • gustavo-kuze
  • donnes
  • alvarosilveiraa
  • lhdev