How to use the popmotion.pointer function in popmotion

startDragging(e) {
    e.preventDefault();

    this.startAction(pointer(e));
    const pointerX = this.currentAction.x.get();
    this.currentAction.setProps({
      onUpdate: pipe(
        // Select the `x` pointer value
        ({ x }) => x,
        // Subtract the pointer origin to get the pointer offset
        // Apply the offset to the slider's origin offset
        add(this.getOffset()),
        subtract(pointerX),
        // Apply a spring if the slider is out of bounds.
        conditional(
          v => v > this.bounds[0],
          nonlinearSpring(this.snapSettings.boundsElasticity, this.bounds[0]),
        ),
        conditional(
          v => v < this.bounds[1],

listen(ref, 'mousedown touchstart').start(e => {
      e.preventDefault();
      pointer(ballXY.get()).start(ballXY);
    });

listen(ref, 'mousedown touchstart').start(() =>
      pointer({ x: this.sliderX.get() })
        .pipe(({ x }) => x, clampMovement)
        .start(this.sliderX)
    );

handleMouseDown(e) {
    if (this.isDisabled()) {
      return;
    }
  
    this.pointerTracker = pointer(e).start();
    
    this.offsetTracker = trackOffset(this.pointerTracker.x, {
      from: this.getOffset(),
      onUpdate: transform.pipe(
        transform.clamp(0, this.getOffsetWidth()),
        offset => this.setState({ offset })
      ),
    }).start();
    
    this.setState({
      isDragging: true,
      offset: this.getOffset(),
    });
  }

listen(ref, 'mousedown touchstart').start(e => {
      e.preventDefault();
      pointer(this.ballXY.get()).start(this.ballXY);
    });

const singleAxisPointer = (axis: string) => (from: number | string) =>
  pointer({
    [axis]: typeof from === 'string' ? parseFloat(from) : from
  }).pipe((v: any) => v[axis]);
const pointerX = singleAxisPointer('x');

const update: (x: number) => void =
      left && right
        ? left === right
          ? (x: number) => {
              this.selectedPanel.styler.set('x', `${x}%`);
              left.styler.set('x', `${x < 0 ? x + 100 : x - 100}%`);
            }
          : (x: number) => {
              this.selectedPanel.styler.set('x', `${x}%`);
              left.styler.set('x', `${x - 100}%`);
              right.styler.set('x', `${x + 100}%`);
            }
        : (x: number) => this.selectedPanel.styler.set('x', `${x}%`);

    const wrapperWidth: number = this.wrapperStyler.get('width');
    this.subscription = popmotion
      .pointer({ x: 0 })
      .pipe(({ x }: { x: number }) => (this.delta = clamp100((x / wrapperWidth) * 100)))
      .start(update);
  }

listen(canvas, 'mousedown touchstart').start((e: { touches: [] }) => {
    const { x, y } = viewer.get() as Position;
    pointer({
      x: (-x * runtime.scaleFactor) / devicePixelRatio,
      y: (-y * runtime.scaleFactor) / devicePixelRatio,
    })
      .pipe((v: Position): Position => ({ x: v.x * devicePixelRatio, y: v.y * devicePixelRatio }))
      .pipe((v: Position): Position => ({ x: -v.x / runtime.scaleFactor, y: -v.y / runtime.scaleFactor }))
      .start(viewer);
  });

return function (from) {
        return pointer((_a = {}, _a[axis] = from, _a)).pipe(function (v) {
            return v[axis];
        });
        var _a;
    };
};