Is there anyway to make just the trackmarks clickable? about react-native-slider

[dlinds]

For anyone else who ever has this question (and if the library doesn't support it at time of reading), the workaround I had was to add a group of transparent components on top of each track mark. Whichever index the thumb is currently at, the zIndex of that track mark will not be set (dropping it behind the thumb), otherwise the transparent track mark area zIndex is set to 100.

const { width: screenWidth } = Dimensions.get("screen")

 const transparentTrackMarks = () =>
   values.map((value) => (
     <Pressable
       key={value}
       style={{
         ...styles.transparentTrackMark,
         width: screenWidth * 0.08, // set a width for the pressable area
         left: `${value * 23}%`,
         ...(currentSliderPosition === value ? {} : { zIndex: 100 }),
       }}
       onPress={() => handleOnValueChange([value])}
     />
   )) 

styles =

  transparentTrackMark: {
    position: "absolute",
    top: 2,
    height: 32,
    width: 32,
    backgroundColor: "pink" //remove this, only used for demoing clickable area
  },

  sliderContainer: {
    zIndex: 10,
  },

implementation

  return (
    <>
      {transparentTrackMarks()}
      <View style={styles.sliderContainer}>
        <Slider
          value={currentSliderPosition}
          trackClickable={false}
          onValueChange={handleOnValueChange} //same handler for transparent track mark
         ....