react-native custom slider, using `diffClamp`

Question

I have made a custom slider which can be seen here.

The problem is with the following snippet

let transX = cond(
  eq(gestureState, State.ACTIVE),
  diffClamp(add(offsetX, dragX), 0, 200),
  set(offsetX, add(offsetX, dragX)),
);

I am able to limit the range of the slider when the gesture is Active but I am not able to set the limit when the gesture has completed.

I tried adding diffClamp to the set method within the cond, but that fixes the position of the knob to the start and the whole slider behaves in a weird way.

Any help would be much appreciated.

Answer 1

I've been seeing some issues when trying to implement something similar using diffClamp, where diffClamp wouldn't assign the node in set. I would suggest implementing the diffClamp using min and max.

Something like this:

let transX = cond(
  eq(gestureState, State.ACTIVE),
  max(0, min(200, add(offsetX, dragX))),
  set(offsetX, max(0, min(200, add(offsetX, dragX)))),
);