ion.rangeSlider: Using one handle position to update the other handle's position

I'm using the JavaScript ion.rangeSlider library (https://github.com/IonDen/ion.rangeSlider).

It supports using two handles.

I want to be able to update the "to" handle when I change the "from" handle.

$(function() {
  console.log('jQuery here!');

  let zfrom = -5;

  const $zslider = $("#zslider");

  $zslider.ionRangeSlider({
    skin: 'big',
    type: 'double',
    min: -5.000,
    max: 5.000,
    from: -5.000,
    to: 5.000,
    step: 0.1,

    //on slider handles change
    onChange: function (data) {
      zslider.update({
        to:   -data.from,
      })
    },
    onUpdate: function(data) {

    },
    onFinish: function (data) {

    }
  })

  const zslider = $zslider.data("ionRangeSlider");

})

HTML:

<input id=zslider type=text />

The problem is that when I move the "from" handle it moves the "to" handle a little bit and then the "from" handle loses focus and I have to grab it again.

I suspect that the zslider.update is causing the onChange/onUpdate to fire and so goes into an infinite loop.

I've tried using various flags and delays, but I can't get the logic to work.

I have a work around which is to move the "to" slider after I finish moving the "from" slider (onFinish), but it isn't pretty.