range slider cannot be dragged in IOS

I am wording on a web application drawing tool, when I test on Ipad, the browsers(safari and chrome) will have a bounce effect when drawing on the canvas. I have tried the solution from Michael P iOS: disable bounce scroll but allow normal scrolling. var content = document.getElementById('scrollDiv');

content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});

The bounce effect has been solved, but my range slider cannot be dragged anymore as well.

HTML:

  <input type="range" on-tap="onTap($event)" on-drag="onTap($event)" class="custom-range" id="sizeRange" min="0" max="200">

JS:

 //brush slider
    var slider = document.getElementById("sizeRange");
    var output = document.getElementById("sizeValue");
    output.innerHTML = slider.value = stWeight;

    slider.oninput = function() {
            stWeight = output.innerHTML = this.value;

    }

Thanks for any solution~