I built a custom HTML audio player and I'm having another error with it on mobile

You can view it here https://dolbydev.wpengine.com/audio-player/

For some reason when I try to adjust the volume with the volume range slider the volume doesn't change. This problem is only on mobile

I thought it might have something to do with the event listeners that I'm using but I don't think that's the issue As you see in my code you'll notice that I load the proper event when detecting mobile which in this case is touchend

I also console logged the values and they are changing when moving the volume slider and testing on iOS safari

I'm at a loss as to what the issue is on mobile. Anybody have any ideas of why that might be

    const volumeSlider = audioPlayerBlockContainer.getElementsByClassName('audioplayer_volume_slider')[0];
    const isDevice = /ipad|iphone|ipod|android/i.test(window.navigator.userAgent.toLowerCase()) && !window.MSStream;
    const volumeSliderEvent = (isDevice ? 'touchend' : 'input') 

    const audio1 = new Audio(audioFileSwitchOff);
    const audio2 = new Audio(audioFileSwitchOn);

    volumeSlider.addEventListener(volumeSliderEvent, (e) => {
        const value = e.target.value;

        audio1.volume = value / 100
        audio2.volume = value / 100

        console.log(volumeSliderEvent)
        console.log(`Audio 1: ${audio1.volume}`)
        console.log(`Audio 2: ${audio2.volume}`)
    })