<div class="card">
<a id="link" href="https://daily-dev-tips.com">Read more on daily-dev-tips</a>
  <label>Offset: 
    <input type="range" min="-2" max="2" step="0.1" value="0" id="offset"></label>
  <label>Thickness: 
    <input type="range" min="0" max="5" step="0.1" value="0" id="thickness"></label>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
label {
  display: flex;
  align-items: center;
}
a {
  text-underline-offset: 0em;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: purple;
  text-decoration-thickness: 0;
  margin-bottom: 4em;
  font-size: 2rem;
}

const link = document.getElementById("link"),
  thickness = document.getElementById("thickness"),
  offset = document.getElementById("offset");

thickness.addEventListener(
  "input",
  function () {
    link.style.textDecorationThickness = this.value + "em";
  },
  false
);

offset.addEventListener(
  "input",
  function () {
    link.style.textUnderlineOffset = this.value + "em";
  },
  false
);