I’m having a hard time getting this flexbox to work with a slider. I’m trying to put beginning and end values on the ends of a slider, but can’t get them spaced properly. Also can’t get them properly aligned.

Current slider state (sorry, can’t post images yet)

Slider code (ignore the wonky text type, I’m just using it for formatting):

<View style={this.props.styles.sliderContainer}>
    <BaseAnchorText style={this.props.styles.sliderText}
        textObj={'0'}
        type={'Body'}
        textStyle={null}
    />
    <Slider style={this.props.styles.slider}
        maximumValue={this.state.probabilityConstraints.maxValue}
        minimumValue={this.state.probabilityConstraints.minValue}
        step={this.state.probabilityConstraints.stepSize}
        value={this.state.probability || this.state.probabilityConstraints.suggestedDefault}
        labelType={'percentage'}
        onSlidingComplete={(probability: number) => this.setState({ probability: probability })}
    />
    <BaseAnchorText style={this.props.styles.sliderText}
        textObj={'99'}
        type={'Body'}
        textStyle={null}
    />
</View>

Styling:

sliderText: {
    margin: StyleCheat.DEFAULT_MARGIN
} as ViewStyle,
slider: {
    width: '80%',
} as ViewStyle,
sliderContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: StyleCheat.DEFAULT_MARGIN,
    marginLeft: StyleCheat.DEFAULT_MARGIN,
    marginRight: StyleCheat.DEFAULT_MARGIN,
} as ViewStyle,