Расширьте/измените размер элемента div с помощью событий касания JavaScript

function touchEvtResize() {
    var block = document.getElementsByClassName("top-three-quarters"),
        slider = document.getElementsByClassName("slider");

    slider.addEventListener('touchstart', function (e) {
        let dragY = e.clientY;

        document.addEventListener('touchmove', function (e) {
            block.style.height = block.offsetHeight + e.clientY - dragY + "px";
            dragY = e.clientY;
        });

        docuemnt.addEventListener('touchend', function (e) { });
    });
}

.top-three-quarters {
    overflow-y: auto;
    resize: vertical;
}

.bottom-quarter {
    flex: 1;
    max-height: 100%;
    min-height: 5%;
}

.slider {
    background-color: #dee2e6;
    cursor: row-resize;
    user-select: none;
    height: 10px;
}

<div class = "top-three-quarters">
</div>
<div class = "bottom-quarter">
  <div class = "slider">
  </div>
</div>

У меня есть этот код, который работает с событиями мыши. Но я хотел бы заставить его работать с сенсорными событиями для сенсорных экранов. Я проводил исследования и не смог найти ничего полезного. Я все еще новичок в JS, поэтому любые рекомендации будут полезны. Желательно без библиотек, если это возможно. У меня есть представление о том, как это выглядит с событиями мыши.

<div class = "top-three-quarters">
</div>
<div class = "bottom-quarter">
  <div class = "slider">
  </div>
</div>

.top-three-quarters {
    overflow-y: auto;
    resize: vertical;
}

.bottom-quarter {
    flex: 1;
    max-height: 100%;
    min-height: 5%;
}

.slider {
    background-color: #dee2e6;
    cursor: row-resize;
    user-select: none;
    height: 10px;
}

    let block = document.querySelector(".top-three-quarters"),
        slider = document.querySelector(".slider");

    slider.onmousedown = function dragMouseDown(e) {
        let dragX = e.clientY;

        document.onmousemove = function onMouseMove(e) {
            block.style.height = block.offsetHeight + e.clientY - dragX + "px";
            dragX = e.clientY;
        }

        document.onmouseup = () => document.onmousemove = document.onmouseup = null;

    }

Скрипка

Я пробовал подобные примеры, такие как Пример 1 и пример 2, но безуспешно. Я не прошу вас, ребята, написать для меня код, а просто дам несколько рекомендаций и советов, чтобы я мог решить эту проблему!