Как добавить вертикальный слайдер громкости для моего сайта?

Question

Я видел много горизонтальных ползунков громкости, но я не видел правильного способа сделать вертикальный ползунок громкости. Мне просто интересно. Как мне сделать вертикальный слайдер громкости для моего сайта? То, что будет появляться только при наведении курсора на кнопку громкости, как на YouTube.

.css для fas или fa-volume-up или fa-pause и т. Д. От https://fontawesome.com/ (если кто-то не знаком с ним)

<div id="star" class="video mask overlay">
<i class="fas fa-volume-up volume-button "></i>
<i class="fas stop-button fa-pause"></i>
<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.2" loop="">
<source src="videos/SONG.MP4" type="video/mp4"></source>
</video>
<script>setTimeout(function(){document.getElementById("video").play();}, 3000);</script>

Класс css для video mask overlay - это просто темный оверлейный слой, чтобы видео не блестело в ваших глазах.

 .volume-button{
    font-size:18px;
    position:absolute;
    z-index:25;
    bottom:50px;
    left:20px;
    cursor:url(../images/cursor/red.cur),pointer;
    color:#fff;
}
 .stop-button{
    font-size:18px;
    position:absolute;
    z-index:25;
    bottom:50px;
    left:50px;
    cursor:url(../images/cursor/red.cur),pointer;
    color:#fff;
}
.video-fallback{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}
 video{
    position:fixed;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    z-index:-9999;
    transform:translateX(-50%) translateY(-50%);
    background-size:cover;
    transition:1s opacity;
}

$(".video").each(function() {
        $(".stop-button").click(function() {
            $(".stop-button").toggleClass('fa-play').toggleClass('fa-pause');
            var videoBG = document.getElementById("video");
            if (videoBG.paused)
                videoBG.play();
            else
                videoBG.pause();
        });
        $(".volume-button").click(function() {
            $(".volume-button").toggleClass('fa-volume-off').toggleClass('fa-volume-up');
            $("video").prop('muted', !$("video").prop('muted'));
        });
    });

Если я что-то пропустил или вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я постараюсь предоставить ее. (Или вы можете посмотреть на моем сайте)