Input Range edit Font Size

by Léo Durand

HTML

<form name="rangesSVG">
    <input type="range" id="widthInput" value="24" min="1" max="100" oninput="widthOutput.value = widthInput.value">
    <output id="widthOutput">24</output>
</form>
<div id="para">
Hello
</div>

CSS

#para{
  font-size:8px;
}

JavaScript

document.rangesSVG.widthInput.oninput = function(){
 value = document.rangesSVG.widthInput.value;
    document.rangesSVG.widthOutput.value = document.rangesSVG.widthInput.value;
        document.rangesSVG.widthOutput.value = document.getElementById("para").style.fontSize = value + "px";
 }