How to implement time picker functionality in react native - react-native

Question

I want to implement a functionality that should allow me to pick time within a range.
it should be like this
I have used react-native-slider and my code is here
import React, { Component } from 'react';
import { View, Text, Image, TextInput, StyleSheet } from 'react-native';
import Slider from 'react-native-slider';
import colors from '../styles/colors';
import Strings from '../localization/strings';
class FindDoctor extends Component {
constructor(props) {
super(props);
this.state = {
value: 6,
};
}
getInitialState() {
return {
value: 2,
};
}
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'column', margin: 20 }}>
<Text style={styles.textStyle}>Looking for</Text>
<View style={styles.input}>
<TextInput
placeholder={Strings.InternalMedicine}
autoCorrect={this.props.autoCorrect}
autoCapitalize={this.props.autoCapitalize}
returnKeyType={this.props.returnKeyType}
placeholderTextColor={colors.dimgray}
underlineColorAndroid="transparent"
onChangeText={TextInputName => this.setState({ TextInputName })}
/>
</View>
</View>
<View style={{ flexDirection: 'column', margin: 20 }}>
<Text style={styles.textStyle}>Near</Text>
<View style={styles.input}>
<TextInput
placeholder={Strings.Place}
autoCorrect={this.props.autoCorrect}
autoCapitalize={this.props.autoCapitalize}
returnKeyType={this.props.returnKeyType}
placeholderTextColor={colors.dimgray}
underlineColorAndroid="transparent"
onChangeText={TextInputName => this.setState({ TextInputName })}
/>
</View>
</View>
<View style={{ flexDirection: 'column', margin: 20 }}>
<Text style={styles.textStyle}>Within</Text>
<View style={styles.sliderStyles}>
<Slider
value={this.state.value}
onValueChange={(value) => this.setState({ value })}
minimumValue={4}
maximumValue={10}
step={10}
/>
<Text>value: {this.state.value}</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
textStyle: {
fontSize: 20,
color: colors.brandBlue,
},
input: {
backgroundColor: colors.white,
height: 40,
width: '80%',
marginTop: 5,
borderRadius: 4,
alignItems: 'flex-start',
justifyContent: 'flex-start',
borderWidth: 1,
borderColor: colors.light_gray,
fontSize: 20
},
sliderStyles: {
//margin: 10,
alignItems: 'stretch',
justifyContent: 'center',
},
});
export default FindDoctor;
and now the output look like this
But i want to add multiples values in slider like the image shown above
can anyone help me to add multiple values in slider