react-native-slider-picker

React Native Slider Picker

React Native input component to select a single value from a range of 0 to a custom maximum.

🚧 🚧 This package is currently under construction 🚧 🚧

Installation

npm install react-native-slider-picker

Required dependencies

React Native Slider Picker relies on react-native-css-vh-vw for height and width dimensions.

npm install react-native-css-vh-vw

Usage

Props

Note: All props are optional and have default values.

Name	Type	Description	Default	Notes
buttonBackgroundColor	String	Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values.	"white"
buttonBorderColor	String	Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values.	"dimgrey"
buttonBorderWidth	Number	Sets border width of Slider's button.	1
buttonDimensionsPercentage	Number	Sets height and width of Slider's button as percentage of viewport width.	1
callback	Function	Called on change.	() => {}
defaultValue	Number	Default value for slider on load.	5	If valued passed is greater than maxValue, the value will be set to that of maxValue.
fillColor	String	Sets fill color of inner slider.	"dodgerblue"	Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values.
heightPercentage	Number	Percentage of device's viewport to set as component's height.	1	Value passed to vh()
labelFontColor	String	Sets font color of labels if they are displayed.	"dimgrey"	Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values.
labelFontWeight	String	Sets font weight of labels if they are displayed.	"" -> the default fontWeight value in React Native.
maxLabel	String	Label for the maximum value.	Empty <View> component.	Empty <View> has a flex : 1 value.
maxValue	Number	The maximum value/high end of range for the Slider.	10
midLabel	String	Label for the medium value.	Empty <View> component.	Empty <View> has a flex : 1 value.
minLabel	String	Label for the minimum value.	Empty <View> component.	Empty <View> has a flex: 1 value.
scaleNumberFontColor	String	Sets font color of scale numbers if they are displayed.	"dimgrey"	Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values.
scaleNumberFontWeight	String	Sets font weight of scale numbers if they are displayed.	"" -> the default fontWeight value in React Native.
showFill	Boolean	Boolean value to determine whether or not the slider inner shows a fill or if it is transparent.	true
showNumberScale	Boolean	Boolean value to determine whether or not to display scale of numbers for the Slider's range.	false
showSeparatorScale	Boolean	Boolean value to determine whether or not to display lines dividing the slider into different sections.	false
sliderInnerBackgroundColor	String	Sets background color of inner slider View.	"white"	Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values.
sliderInnerBorderStyles	Object	An object of StyleSheet properties to set border-related styles of sliderInner View component.	{ borderWidth: vw(1) / 2, borderColor: '#d9dce4', borderBottomColor: '#f1f4f5', borderRadius: 50 }	If passed, the object is filtered to remove any key/value properties that are not for component's border.
widthPercentage	Number	Percentage of device's viewport to set as component's width.	85	Value passed to vw()