在项目中想创建一个用于控制范围的流畅的双向slider组件，于是想利用horizontal-drag-gesture-handler手势组件来实现并封装成组件。在手势触发的'worklet'函数的最后使用wx.worklet.runOnJS来调用对应的方法修改数据。

    onMaxDrag(e) {
      "worklet";
      const { deltaX } = e;
      const deltaN =
        (deltaX / this._lineWidth.value) * (this._max.value - this._min.value);
      this._curMax.value += deltaN;
      if (this._curMax.value > this._max.value)
        this._curMax.value = this._max.value;
      if (this._curMax.value < this._curMin.value)
        this._curMax.value = this._curMin.value;


      runOnJS(this.setMaxNum)(this._curMax.value);
    },
    setMaxNum(val) {
      console.log("--- 组件中 setMaxNum 中的this ---", this);
      this.setData({ curMaxNum: val });
    },

直接写在页面中能够得到预期结果，但是封装成组件却不能

实际场景如下图中，上方拖动条是在100-10000中选取范围（组件内），拖动两端小球UI能正常流畅变化，但是底部数值并未跟随变化。下方大球为写在页面中，拖动后能实时显示拖动距离。

通过对比之后发现，写在页面中this指向正常，但写在组件this指向变为{}，导致无法进行数据修改的操作。

请问是runOnJS等等相关的worklet方法只能在页面中直接使用么？还是说我的使用方法存在问题？请大佬们解答一下