You can control the values of input and slide separately, that will be much more convenient and conforms to React's state control.

Code fragment sample

    const [min, setMin] = useState({ input: 0, slide: 0 });
    const [max, setMax] = useState({ input: 100, slide: 100 });

    const handleMaxChange = (e) => {
    const v = parseInt(e.target.value, 10);
    if (v) {
      if (v < min.input && !!min.input) {
        setMax({ input: min.input + 1, slide: min.slide + 1 });
      } else if (v > extremeMax) {
        setMax({ input: extremeMax, slide: extremeMax });
      } else {
        setMax({ input: v, slide: v });
      }
    } else {
      setMax((prev) => ({ ...prev, input: "" }));
    }
  };

Full code sample

it's not clear to me what you really want to do. Because let's say Min value is 40, and user clears the textbox with backspaces: first time, it's 4, the second time backspace is hit it will be empty. Do you want the slider stay at 40 or 4?

in any case, you can hold the value for previous state of min/max and if the new value of textbox is empty, don't update the slider state.

You can simply setup the slider like this:

<MultiRangeSlider
      minVal={min ? min : 0}
      maxVal={max ? max : 0}
      ...
/>

Demo on CodeSandbox.

This is a bit of an advanced solution, but you can use debouce from lodash (or code your own debounce function, but use packages instead)

What you can do is have a debounce on the user input for the sliders On the 'onChange' for your input component, debounce updating the slider value in your state, and have a check that if the input is null/undefined/empty, then don't update the state :)

I'm taking a break at work, but if you need me to provide exact code, I can do so ^-^