<input type="range" id="range" min="1.0" max="3.0" step="0.1" value="2.0" list="rangelist" />
<datalist id="rangelist">
<option>1.5</option>
<option>2.5</option>
</datalist>
<form id="form">
<label for="">Label</label>
<input type="text" value="Some Input Value" />
</form>
form {
font-size: 2em;
background: #ccc;
padding: 20px;
max-width: 500px;
margin: 20px auto;
}
label,
input[type=text] {
font-family: sans-serif;
}
label {
display: block;
font-weight: bold;
}
input[type=text] {
padding: 0.2em;
font-size: 70%;
}
var range = document.querySelector("#range");
var form = document.querySelector("#form");
range.addEventListener("input", function() {
form.style["font-size"] = this.value + "em";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.