Border radius for ends of slider but not for 'active' section?

[jameschetwood]

I need the Thumb to be the same height as the Track, and for the edges of the slider to have a border radius. However when I apply these styles you can see the border radius of the 'active' part of the slider behind the Thumb.

<Slider
  style={styles.slider}
  trackStyle={styles.trackStyle}
  thumbStyle={styles.thumbStyle}
/>

const styles = StyleSheet.create({
  slider: {
    borderRadius: 12,
  },
  trackStyle: {
    height: 24,
    borderRadius: 12,
  },
  thumbStyle: {
    height: 24,
    width: 24,
    backgroundColor: "white",
    borderRadius: 12,
  },
});

Currently it looks like this:

But I need this (excuse the low quality image):

Can this be done?