<input type="range" min="0" max="100" value="50" class="vertical-sldier" id="range" />
<img src="volume_up_black_24dp.svg" id="volume-icon" />
<div id="range-value"></div>

<script>
    var slider = document.querySelector("#range");
    var output = document.querySelector("#range-value");
    
    output.innerHTML = slider.value;
    
    slider.oninput = function () {
    	output.innerHTML = this.value;
    	if (slider.value === "0") {
    		document.querySelector("#volume-icon").src = "volume_off_black_24dp.svg";
            document.querySelector("#range").style.opacity = "0.5";
    	} else {
    		document.querySelector("#volume-icon").src = "volume_up_black_24dp.svg";
            document.querySelector("#range").style.opacity = "1";
    	}
    };
    
</script>