jQuery: Control CSS with range slider

Question

How is it possible to control CSS with a range slider via jQuery?

Some example code:

$('.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">

Would be very thankful for help!

Cagri Tacyildiz · Accepted Answer · 2020-05-07 00:41:13Z

1

use val() instead of 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>

answered May 7, 2020 at 0:41

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery: Control CSS with range slider

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related