صدای ویدئو

سلام. وقتتون بخیر. یه ویدئو توی صفحه ام گذاشتم که کنترل هاشو خودم طراحی کردم. توی قسمت صدا، یه input با 'type='range گذاشتم.
توی جاوااسکریپتش نوشتم اگه مقدار این input تغییر کرد، صدای ویدئو هم نسبت به این هم تغییر کنه و آیکون صدایی که کنار این input هست، نسبت به مقدار input یا بی صدا بشه یا باصدا.
تا اینجا مشکلی نیست ولی میخوام اگه روی خود آیکون کلیک شد، مقدار input یا صفر بشه یا حالا یه عددی بشه و خود آیکون هم شکلش تغییر کنه.
مشکل اینجاست که فانشن اول و فانشن دوم موقعی که فراخوانی میشن، اختلال بینشون پیش میاد و وقتی با فانشن دوم صدا قطع شده، بخاطر یه دلیلی، باز هم صدا پخش میشه. بنظرتون مشکلش چیه؟

var video = document.getElementById("video");
var volumeSlider = document.getElementById("volume");
var sondImg = document.getElementById("sound-img");

function changeVolume() { // وقتی که مقدار اینپوت تغییر کرد
    video.volume = volumeSlider.value;

    if (volumeSlider.value == 0) {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/sound-speaker.png' title='sound' />"; // آیکون بی صدا
    } else {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/room-sound.png' title='sound' />"; // آیکون باصدا
    }
}

function changeVol() {  // وقتی که روی آیکون صدا کلیک شد
    video.volume = volumeSlider.value;

    if (volumeSlider.value == 0) {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/room-sound.png' title='sound' onclick='changeVol()' />"; // آیکون باصدا
        volumeSlider.value = 0.40;
    } else {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/sound-speaker.png' title='sound' onclick='changeVol()' />"; // آیکون بی صدا
        volumeSlider.value = 0;
    }
}