Apply effect when changing value of an input

Asked

Viewed 1,047 times

5

I need some help with an effect I wanted to do, but I’m not getting it.

I have a range type input that goes from 1 at the 10, being its default value 5:

<input class="i1" type="range" min="1" max="10" value="5">

What I want to do is that every time I change the value of that input, the style value font-size of my element p be amended.

<p class="p1">Um texto aleatório</p>
javascript html jquery

3 answers

6


If you want to work with jquery the code is this:

$(document).on('input', '#slider', function() {
	var num = $(this).val();
	console.log(num);
	$(".p1").css({ 'font-size': num*3+'px' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="p1">Um texto aleatório</p>
<input id="slider" class="i1" type="range" min="1" max="10" value="5">

  • Very obg, that’s exactly what I was trying to do.

4

A possible solution would be:

$(document).ready(function(){
console.log('teste')
  $('input').change(function(){
    $('p').css('font-size', $(this).val()*3)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="i1" type="range" min="1" max="10" value="5">
<p class="p1">Um texto aleatório</p>

Note that the multiplication by 3 was added only to improve the visualization of the change.

3

You can do it like this:

(function () {
  'use strict';

  var min = 10; // Usaremos este como um valor relativo para o efeito.

  var input = document.getElementById('my-range');
  var p     = document.getElementById('my-p-el');

  input.addEventListener('change', function () {
    var size = min + parseInt(this.value);

    p.style.fontSize = size + 'px';
  });
}());
<input class="i1" id="my-range" type="range" min="1" max="10" value="5" />
<p class="p1" id="my-p-el">Um texto aleatório</p>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.