Van.Js收听移动触摸屏事件

Question

我制作了一个范围条：

    const oRange = document.getElementById('ratioRange');
const oInput = document.getElementById('ratio-input');

// range bar refresh
let bflag = false; 

function rit(val){return Math.round(val*100)/100;}
function toPercent(mi, ma, val){return rit((val-mi)/(ma-mi)*100);}
function toRatio(rmi, rma, mi, ma, val){return rit((rma - rmi) * toPercent(mi, ma, val)/100 + rmi);}


function ratioControl(){
    if(!bflag){return;}
    let x = parseInt(oRange.value);
    oInput.value = x;
    let p = toPercent(0, 400, x);
    let color = 'linear-gradient(90deg, rgb(117, 252, 255)' + p + '%, rgb(214,214,214)' + p + '%)';
    oRange.style.background = color;
}

oRange.addEventListener('mousedown', ()=>{bflag = true;});
oRange.addEventListener('mousemove', ()=>{ratioControl();});
oRange.addEventListener('mouseup', ()=>{bflag = false;});

    .slider{
    -webkit-appearance: none;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    height: 20px; 
    background: linear-gradient(90deg, rgb(214,214,214) 60%, rgb(214,214,214) 60%);
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: 12px;
    box-shadow: 0px 1px 10px 1px black;
}

.slider:hover{
    opacity: 1;
}

.slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.slider::-moz-range-thumb{
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

    <input type='range' min="0" max="400" value="200" id="ratioRange" class='slider' />
<label id='ratio-label' class='adjust-label'>Ratio</label><input id='ratio-input' class='adjust-input' type="number" name="" value="">

问题是它可以在PC或Mac上运行，但不能在iPhone上运行。

在iPhone上，仅滚动拇指时，输入值和背景渐变都不会改变。

我想知道是否有一种解决方法，我可以听触摸屏事件吗？

感谢您的帮助。