<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";
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.