Can you make draggable components?

[ArdenKolodner]

(see my next comment for the workaround I used)

I am working in React Native/Victory Native. I have a VictoryChart that will be displaying time series data, along with two horizontal lines which are "thresholds," where the program should have one behavior when the signal is above the upper threshold, another if it's below the lower, and a third behavior if the signal is between the two thresholds. Displaying this is no problem; my code is below. The thresholds need to be updated, and I currently use either a slider or number input for that. However, it would be much more user-friendly if the user could just touch and drag the thresholds up and down, to wherever feels right. I haven't been able to determine if such a thing is possible in Victory. By using a VictoryContainer, a component can detect when it's pressed. However, I have run into two issues after that:

1. Horizontal VictoryLine component containers seem to have a height of 0, so you can't click on them (see "This function never runs" in my code below). Is there a way to fix this? I tried manually specifying height (and width), but neither helped. onTouchStart and onTouchEnd both don't fire when put in a VictoryContainer around a VictoryLine, but they do work when putting them in the chart itself. Unfortunately, I don't want to drag around the whole chart, just the lines within it.

2. There's no persistent method to detect clicks/touches, only onTouchStart and onTouchEnd. How could I go about making the component draggable in between? It would need to know the motion of the cursor in between the start and end.

Also, if there's simply no way to make this happen in Victory, please let me know as well! Don't want to spend too long down the rabbit hole if I should just move on.

My chart code:

<VictoryChart

width={350}

theme={VictoryTheme.material}>

  <VictoryAxis

    dependentAxis

    crossAxis

    domain={[-90, 90]}

    theme={VictoryTheme.material}

    standalone={false}

  />

  <VictoryLine

    data={bleData.receivedData}

    x="timestamp"

    y={channelName}

    style={dataLineStyle}

  />

  <VictoryLine

    containerComponent={

      <VictoryContainer

        onTouchStart={() => { // This function never runs.

          setScrollEnabled(false);

          console.log('touch!');

        }}

        onTouchEnd={() => setScrollEnabled(true)} // This function also does not run.

      />

    }

    y={() => upperThreshold}

    domain=[omitted for concision, basically just finds the earliest and latest timestamps]

    style={thresholdLineStyle}

  />

  <VictoryLine

    y={() => lowerThreshold}

    domain=[omitted, see above]

    style={thresholdLineStyle}

  />

</VictoryChart>

[ArdenKolodner]

Update: while I have not found anything more suggesting that this is possible, I did find a workaround: overlaying a vertical slider on top of the graph, positioning and scaling it so that the thumb lined up with the threshold line, and making it (semi)transparent but still functional.