I need a help with an effect I wanted to do, but I'm not getting it.
I have an input of type range that goes from 1 to 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 this input, the value of the font-size style of my p element changes.
<p class="p1">Um texto aleatório</p>
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><pclass="p1">Um texto aleatório</p>
<input id="slider" class="i1" type="range" min="1" max="10" value="5">One 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><inputclass="i1" type="range" min="1" max="10" value="5">
<p class="p1">Um texto aleatório</p>Note that multiplication by 3 was only added to improve the change preview.
You can do 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>