Trying to move a range input with javascript and also triggering onchange explicity in react

Actually, directly manipulating the DOM will not make React recognize the change. You are calling volumeChangeHandler but in a complicated way.

This doesn't work:

  const volumeResetHandler = async () => {
    inputRef.current.value = 0;
    (inputRef.current as any).addEventListener('change', volumeChangeHandler);
    (inputRef.current as any).dispatchEvent(new Event('change', { bubbles: true }));
    // if you replace volumeChangeHandler with another function you will see that
    // it won't get triggered when the actual <input> changes naturally
  }

This is how it should be:

  const volumeResetHandler = async () => {
     const valueSetter= Object.getOwnPropertyDescriptor(
         window.HTMLInputElement.prototype,"value")
          .set;                             //Take out the setter function
     valueSetter.call(inputRef.current, 0); //This is how React internally updates state

     inputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
     //now this event will actually trigger the onchange of the <input>
  }

Remember that React uses virtual DOM, direct change of real DOM without state management won't be reconciled so it doesn't trigger the onchange event of the <input>

Edit: my code suggestion is written in js, if you're using typescript you might need to change the code a bit to rule out the null/undefined

In React, you need to use a controlled input to solve this. You should avoid using DOM manipulations like querySelector in combination with React for cases like this.

To render a controlled input, pass the value prop to it. React will force the input to always have the value you passed.

Use the onChange prop to call setValue to ensure that the input value always reflects the React state.

function MyComponent() {
  const [value, setValue] = useState(10);

  return (
    <input
      type="range"
      value={value} // ...force the input's value to match the state variable...
      onChange={(e) => setValue(e.target.value)} // ... and update the state variable on any edits!
    />
  );
}

You can also call setValue from other buttons or elements, like this:

function MyComponent() {
  const [value, setValue] = useState(10);

  const volumeResetHandler = () => {
    setValue(0);
  };

  return (
    <>
      <input
        type="range"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={volumeResetHandler}>Reset</button>
    </>
  );
}

If you have more logic in your volumeChangeHandler, that should be run for both volumeChangeHandler and volumeResetHandler, the idiomatic way to solve this in React would be to move that custom logic into its own function like this:

function MyComponent() {
  const [value, setValue] = useState(10);

  const customChangeHandler = (value) => {
    // Do some custom logic here
    setValue(value);
  };

  const volumeResetHandler = () => {
    customChangeHandler(0);
  };

  const volumeChangeHandler = (e) => {
    customChangeHandler(e.target.value);
  };

  return (
    <>
      <input
        type="range"
        value={value}
        onChange={volumeChangeHandler}
      />
      <button onClick={volumeResetHandler}>Reset</button>
    </>
  );
}

I got it working with slight modification of what @LãNgọcHải suggested:

  const volumeResetHandler = async () => {
    inputRef.current.value = 0;
    (inputRef.current as any).addEventListener('change', volumeChangeHandler);
    (inputRef.current as any).dispatchEvent(new Event('change', { bubbles: true }));
  }

Thanks a lot @LãNgọcHải . Only a small issue I have is I had a logic based on event.isTrusted==true which is now false for any explicitly triggering event. I would have to find some work around for that. I guess that's what bubbles is for, isn't it @LãNgọcHải ?