React Native Slider Picker
A lean, custom React Native input component to select a single value on a scale from 0 to a maximum value of your choice.
Installation
npm install react-native-slider-picker
Required dependencies
React Native Slider Picker's sole dependency is react-native-css-vh-vw, which is used for height and width dimensions.
Usage
Props:
Note: All props are optional and have default values.
Functional Props:
Name | Type | Description | Default | Notes |
---|---|---|---|---|
callback | Function | Called on change. | () => {} |
|
convertToNumericInputOnScreenReader | Boolean | Determines if the component should be converted to a numeric typed <TextInput> component. |
true |
|
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 . |
errorToleranceMargin | Number | Margin of error for user to move drag off of the cursor along the Y Axis of the screen/component. If user drags beyond this amount of units in either vertical direction the PanResponder event will not update position of cursor. | 50 |
Is checked to ensure a Number type is passed that is greater than 0 . |
maxValue | Number | The maximum value/high end of range for the Slider. | 10 |
|
slideBeginCallback | Function | Callback function to be executed when Slider's touch event begins. | () => {} |
Called in onPanResponderGrant property of panResponder
|
General Style Props:
Name | Type | Description | Default | Notes |
---|---|---|---|---|
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()
|
maxLabel |
String | Label for the maximum value. | Empty <View> component. |
Empty <View> has a flex : 1 value. |
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. |
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 |
|
widthPercentage |
Number | Percentage of device's viewport to set as component's width. | 85 |
Value passed to vw()
|
Specific Style Props:
Name | Type | Description | Default | Notes |
---|---|---|---|---|
buttonBackgroundColor |
String | Sets background color of Slider's button. | "white" |
Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. |
buttonBorderColor |
String | Sets border color of Slider's button. | "dimgrey" |
Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. |
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 |
|
labelFontColor |
String | Sets font color of labels if they are displayed. | "dimgrey" |
Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. |
labelFontSize |
Number | Sets font size of labels if they are displayed. | 28 |
|
labelFontWeight |
String | Sets font weight of labels if they are displayed. | "normal" |
|
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. |
scaleNumberFontSize |
Number | Sets font size of scale numbers if they are displayed. | 24 |
|
scaleNumberFontWeight |
String | Sets font weight of scale numbers if they are displayed. | "normal" |
|
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. |
Style Override Props:
Name | Type | Description | Default | Notes |
---|---|---|---|---|
buttonStylesOverride |
Object | If passed, overrides all styling for the slider's button. | null |
|
labelStylesOverride |
Object | If passed, overrides all styling for the slider's label text. | null |
|
numberStylesOverride |
Object | If passed, overrides all styling for the slider's number scale text. | null |
|
selectionFillStylesOverride |
Object | If passed, overrides all styling for the slider's inner fill indicating current value. | null |
|
separatorStylesOverride |
Object | If passed, overrides all styling for the separator lines for the slider. | null |
|
sliderInnerStylesOverride |
Object | If passed, overrides all styling for the slider's inner container. | null |
Accessibility/Screen Reader Numeric Input Conversion Props:
Name | Type | Description | Default | Notes |
---|---|---|---|---|
accessibilityLabel | String | Passed to accessibilityLabel prop on numeric TextInput if screen reader is enabled and convertToNumberInputOnScreenReader is true
|
'' |
|
accessibilityHint | String | Passed to accessibilityHint prop on numeric TextInput if screen reader is enabled and convertToNumericInputOnScreenReader is true . |
'' |
|
convertToNumericInputOnScreenReader | Boolean | Determines if the component should be converted to a numeric typed TextInput component. | true |
|
numericInputContainerStyles | Object | StyleSheet rules passed to the <View> component that wraps <TextInput> in numeric input for screen readers. |
{ width: vw(25), flexDirection: 'row',backgroundColor: '#f1f4f5', borderBottomColor: "#889cb2", borderBottomWidth: vh(1) / 3, marginHorizontal: vw(5), marginVertical: vh(2), padding: vw(4), borderTopLeftRadius: 10, borderTopRightRadius: 10, ... Platform.isPad ? ({ marginTop: vh(4)}) : null } |
|
numericInputTextInputStyles | Object | StyleSheet rules passed to the <TextInput> component in numeric input for screen readers. |
{ flex: 1, fontSize: Math.ceil(vw(3) * 1.3), ... Platform.select({ ios: { marginTop: vw(2) }, android: { paddingBottom: 0, paddingTop: 5 }}) } |
Basic, bare-bones usage:
import { SliderPicker } from 'react-native-slider-picker';
<SliderPicker />
Usage with many props:
import { SliderPicker } from 'react-native-slider-picker';
export class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { value: 25 };
}
render() {
return (
<View style={styles.container}>
<SliderPicker
minLabel={'0'}
midLabel={'50'}
maxLabel={'100'}
maxValue={100}
callback={position => {
this.setState({ value: position });
}}
defaultValue={this.state.value}
labelFontColor={"#6c7682"}
labelFontWeight={'600'}
showFill={true}
fillColor={'red'}
labelFontWeight={'bold'}
showNumberScale={true}
showSeparatorScale={true}
buttonBackgroundColor={'#fff'}
buttonBorderColor={"#6c7682"}
buttonBorderWidth={1}
scaleNumberFontWeight={'300'}
buttonDimensionsPercentage={6}
heightPercentage={1}
widthPercentage={80}
/>
<Text>state.value: {this.state.value}</Text>
</View>
);
}
}
Usage with scale
import { SliderPicker } from 'react-native-slider-picker';
export class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { value: 5 };
}
render() {
return (
<View style={styles.container}>
<SliderPicker
minLabel={'min'}
midLabel={'mid'}
maxLabel={'max'}
maxValue={10}
callback={position => {
this.setState({ value: position });
}}
defaultValue={this.state.value}
labelFontColor={"#6c7682"}
labelFontWeight={'600'}
showFill={true}
fillColor={'green'}
labelFontWeight={'bold'}
showNumberScale={true}
showSeparatorScale={true}
buttonBackgroundColor={'#fff'}
buttonBorderColor={"#6c7682"}
buttonBorderWidth={1}
scaleNumberFontWeight={'300'}
buttonDimensionsPercentage={6}
heightPercentage={1}
widthPercentage={80}
/>
<Text>state.value: {this.state.value}</Text>
</View>
);
}
}