<div class="card">
<a id="link" href="https://asyrafff.com/">Adjust my Thickness</a>
  <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-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: blue;
  text-decoration-thickness: 0;
  margin-bottom: 4em;
  font-size: 3rem;
}

const link = document.getElementById('link'), thickness = document.getElementById('thickness');

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