How to setState upon upon touch end with React-native-range-slider

Question

I'm using the rn-range-slider package (https://www.npmjs.com/package/rn-range-slider) and am currently using the onValueChanged prop as below:

<RangeSlider
...otherProps
onValueChanged={(low, high, fromUser) => {
                setSelectedTime(low);
              }}
/>

The problem is that this sets state for every single step, e.g. when sliding from 30 to 80, state is set for each step addition (in my case, step = 5), so 30, 35, 40, ... 80.

I just want state to be set when user releases their finger from the slider i.e. the final number. There is a callback prop called "onTouchEnd" but when I substitute it for "onValueChanged" in the above code example, it gives me the error:

Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, nativeEvent, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

John Salzman John Salzman · Accepted Answer · 2020-09-28T14:41:16

Unfortunately, you cannot use the onTouchEnd() callback to get the changed values.

These two callbacks (onTouchEnd, onTouchStart) can only be used to dispatch functions.

For example...

<RangeSlider
...otherProps
onValueChanged={(low, high, fromUser) => {
                setSelectedTime(low);   // This value will be saved in state/elsewhere
              }}
onTouchEnd={() => {updateModelPrediction();}}  // In updateModelPred() you would run an analysis or something else
/>

where updateModelPrediction would do something like the following...

updateModelPrediction(){
    // Grab values from where saved/state
    low, high = {this.state}
    // Do something with number

}

How to setState upon upon touch end with React-native-range-slider

1 Answers