5

Necessito de uma ajuda com um efeito que queria fazer, mas não estou conseguindo.

Tenho um input do tipo range que vai do 1 ao 10, sendo o seu valor padrão 5:

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

O que quero fazer é que a cada vez que eu mudar o value desse input, o valor do estilo font-size do meu elemento p seja alterado.

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

3 Respostas 3

6

Caso queira trabalhar com jquery o código é esse:

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

1
  • Muito obg, era exatamente o que eu estava tentando fazer.
    – EDGNoizy
    9/01/2018 às 22:13
4

Uma possível solução seria:

$(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 que a multiplicação por 3 foi adicionada apenas para melhorar a visualização da mudança.

3

Você pode fazer assim:

(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .