Dynamic Animation translate limits on Slider

Question

I have a task where I'm creating a 'slider' essentially, but it has two bars on the same slider. What I'm trying to do is move those sliders up and down the y axis but the bar you are sliding is not to move past it's twin. eg. Top Slider is not to move past the Bottom Slider and visa versa.

My thought is then that the output limits along the translateY will be dynamic.

So far, attempts have shown to have odd behaviours.

View Image Example

I have tried the top and bottom bars as pan responders with there movements on the y-axis, saved in a useState and that state is added to the outputRange on the translateY

`<Animated.Image
 resizeMode="stretch"
 source={Theme.defaultImages.progressBar}
 style={{
     width: hp(100) / 2.8,
     height: hp(4),
     position: 'absolute',
     alignSelf: 'center',
     transform: [
                    {
                        translateY: pan.y.interpolate({
                            inputRange: [0, height],
                            outputRange: [0, topBarYPositionState], //useState is added here      for dynamic limit.
                            extrapolate: 'clamp',
                        }),
                    },
                 d],
        }}
        {...PanResponder.panHandlers}
/>`