<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter