Вертикальный прогресс-бар

[cupoma58]

Привет.
Это - плеер.
Небольшая проблема - в прогресс-блоке. Прогрессы, у меня - вертикальные.
Индикатор прогресса (верхний):

HTML:
<span class="progres-bar"><span class="progres"></span></span>

CSS:
.progres-bar {
    position: relative;
    width: 100%;
    height: 68%;
    margin-top: 3px;
    display: flex;
    align-items: flex-start;
    background: #696969;
    cursor: pointer; 
}
.progres {
    -webkit-transition: height 0.6s ease;
    height: 0;
    width: 100%;
    background: #cc7600; 
}

JS:
// инициация прогресса:
video.addEventListener('timeupdate', () => { 
    var size = (video.currentTime * 100) / video.duration; 
    progres.style.height = size + '%';    
    elapsed.innerHTML = setTime(video.currentTime); 
});

// выбор эпизода:
pb.addEventListener('click', (e) => { 
    var mouseY = e.offsetY;
    progres.style.height = (mouseY * 100) / progres-bar.offsetHeight  + '%';    
    video.currentTime = (video.duration * mouseY) / progres-bar.offsetHeight;  
});

Индикатор звука (нижний):

HTML:
<span class="saund-bar"><span class="saund"></span></span>

CSS:
.saund-bar {
    position: relative;
    width: 100%;
    height: 27%;
    margin-top: 3px;
    display: flex;
    align-items: flex-start;    
    background: #696969;
    cursor: pointer; 
}
.saund {
    -webkit-transition: height 0.6s ease;
    height: 10%;
    width: 100%;
    background: #cc7600; 
}

JS:
// выбор уровня громкости:
sb.addEventListener('mousedown', (e) => { 
    var mouseY = e.offsetY, 
        value = (mouseY * 100) / saund-bar.offsetHeight;
    saund.style.height = value + '%';
    video.volume = value / 100;   
});

Оба прогресса, адекватно, работают т о л ь к о сверху-вниз (Х-вправо, Y-вниз).
Если поменять flex-start на flex-end, т.е. - снизу-вверх, значения, при выборе,
меняются - само-произвольно.
Что посоветуете со сменой направления прогресса?