jQuery: Control CSS с ползунком диапазона

Question

Как можно управлять CSS с помощью ползунка диапазона через jQuery?

Пример кода:

$('.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-size: 12px;
}

.text {
  font-size: 120px;
}

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

<div class="text">Text
  <div>

    Font Size: <input class="font_size" type="range" value="120" min="30" max="200">

Буду очень благодарен за помощь!

Answer 1

используйте val() вместо attr("value")

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

* {
  font-size: 12px;
}

.text {
  font-size: 120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  Font Size: <input class="font_size" type="range" value="120" min="30" max="200">
<div class="text">Text
  <div>