如何在React Native中实现时间选择器功能

Question

我想实现一项功能，使我可以选择一个范围内的时间。

应该是这样

我使用了react-native-slider，我的代码在这里

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;

现在输出看起来像这样

但是我想像上面显示的图像一样在滑块中添加倍数值 谁能帮我在滑块中添加多个值