jQuery: управление настройками шрифта с помощью ползунков диапазона

Question

Я пытался закодировать инструмент управления шрифтами. В настоящее время это выглядит так:

$('.font_size').on('input', function() {
  var fontsizeval = $(this).attr('value');
  var fontsizemin = $(this).attr('min');
  var fontsizemax = $(this).attr('max');
  $('.text').css("font-size", fontsizeval + "px");
});

$('.font_weight').on('input', function() {
  var fontweightval = $(this).attr('value');
  var fontweightmin = $(this).attr('min');
  var fontweightmax = $(this).attr('max');
  $('.text').css("font-variation-settings", "'wght'" + fontweightval + "px");
});

@import url('https://rsms.me/inter/inter.css');

* {
  font-size: 12px;
}

.text {
  font-size: 200px;
  font-family: 'Inter var experimental';
  font-variation-settings: "wght" 200;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="text">Stack<div>

Font Size: <input class="font_size" type="range" value="20" min="10" max="40"><br>
Font Weight: <input class="font_weight" type="range" value="200" min="100" max="400">

Было бы здорово, если бы он был основан на этом коде. Но у меня есть проблемы, чтобы это сработало. Кто-нибудь может мне помочь? Буду оооочень благодарен!