magnify value bind to input range

[portseif]

Is there a way to bind the magnify value to an input range? I've tried the following, and it works, but I was wondering if there's a way to keep the magnified image open while the slider controls the magnify value:

input range html:

<label for="zoom-factor">Zoom:</label>
<input type="range" id="zoom-factor" name="zoomFactor" min="0" max="10" value="1" step="0.1">

jquery Zoom code:

jQuery(document).ready(($) => {
    let zoomFactor = $('#zoom-factor');
    let imgElement = $('.wp-image-7894');
    
    zoomFactor.on('input', () => {
        console.log(zoomFactor.val());
        doZoom(imgElement, zoomFactor.val());
    });
    
    doZoom(imgElement);
    
    function doZoom(img, zoomInt = 1) {
        if ($('#img-wrap .wp-image-7894').length) {
            console.log('it exists! no wrapper');
            img.parent().trigger('zoom.destroy');
            
            img
            .parent()
            .zoom({
                //on: 'toggle',
                magnify: zoomInt,
                //url: '/wp-content/uploads/2023/03/[email protected]',
            });    
        } else {
            console.log('it does not exist! create wrapper');
            img
            .wrap('<span id="img-wrap" style="display:inline-block"></span>')
            .css('display', 'block')
            .parent()
            .zoom({
                on: 'toggle',
                magnify: zoomInt,
                url: '/wp-content/uploads/2023/03/[email protected]',
            }); 
        }
    }
});