Linking 'muted speaker' icon to volume sli

Question

I have a speaker icon besides my volume slider, and I would like the icon to change when the volume value is at 0, to a second (muted) speaker icon. I've tried different variations which didn't work. How do I do that? Thanks!

var volumeslider;
volumeslider = document.getElementById("volumeslider");
	// Add Event Handling
	volumeslider.addEventListener("mousemove", setvolume);
	// Functions
	function setvolume(){
	    audio.volume = volumeslider.value / 100;
    }

input[type=range] {
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: top;
	width: 60%;
	margin: 10px 0;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 10px;
 cursor: pointer;
 animate: 0.2s;
 background: #000000;
}
input[type=range]::-webkit-slider-thumb {
 border: 1px solid #000000;
 height: 20px;
 width: 10px;
 border-radius: 1px;
 background: #ffffff;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
 background: #666666;
}
input[type=range]::-moz-range-track {
 width: 100%;
 height: 10px;
 cursor: pointer;
 animate: 0.2s;
 background: #000000;
}
input[type=range]::-moz-range-thumb {
 border: 1px solid #000000;
 height: 20px;
 width: 10px;
 border-radius: 1px;
 background: #666666;
 cursor: pointer;
}
input[type=range]::-ms-track {
 width: 100%;
 height: 10px;
 cursor: pointer;
 animate: 0.2s;
 background: transparent;
 border-color: transparent;
 border-width: 16px 0;
 color: transparent;
}
input[type=range]::-ms-fill-lower {
 background: #2a6495;
 border: 0.2px solid #010101;
 border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
 background: #3071a9;
 border: 0.2px solid #010101;
 border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
 border: 1px solid #000000;
 height: 20px;
 width: 10px;
 border-radius: 1px;
 background: #ffffff;
 cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
 background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
 background: #367ebd;
}

    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    <img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">

Answer 1

Use JQs attr method to just swap the image source. Also, make sure the src path to the images is relative to the HTML document if you are using an external JS document.

JS:

 volumeslider.addEventListener("mousemove", checkMute); 

//check for mute each time the slider is dragged.

function checkMute(){
    if (audio.volume == 0){
        $( ".speaker" ).attr("src", "images/speaker.png");
    }else{
        $( ".speaker" ).attr("src", "images/speakermute.png");
    }
}