Input Range that increases text size

Question

I’m trying to create a <input type="range"> which increases and/or decreases the size of the text as we move it left or right.

So far so good, I was able to create this effect, but now I wanted to put a number indicating the font-size after we moved the <input type="range"> and I blocked that part.

Here’s the code I got so far:

$("#fader").on("input",function () {
    $('#v-28').css("font-size", $(this).val() + "px");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="valor-fontSize">40</p>
<input class="none" type="range" min="14" max="40" value="0" id="fader" step="1" >
    
<p id="v-28">
Após uma viagem que se prolongou por mais de nove anos e em que percorreu 4,8 mil milhões de quilómetros a New Horizons passou o mais perto de Plutão às 11:49 TMG (12:49 em Lisboa) em piloto automático, divulgou a NASA na rede social Twitter.
</p>

Here’s an example in jsFiddle as well: http://jsfiddle.net/Lucp945b/

If it were a input that could put the number or value of the font-size that we want the text to stay and at the same time move the input range to the place where supposedly this value would be located in the input range would be even better.

Answer 1

What you lack then is to insert into the element #valor-fontSize the input value. You can do this with jQuery like this:

 $('#valor-fontSize').html(tamanhoDaFonte);

I used so in the example below:

$("#fader").on("input change",function () {
    var size = this.value + 'px';
    $('#v-28').css("font-size", size);
    $('#valor-fontSize').html(size);
});

but you could also do

$('#valor-fontSize').html($('#v-28').css("font-size"));

to make sure that the result is right.

$("#fader").on("input change",function () {
    var size = this.value + 'px';
    $('#v-28').css("font-size", size);
    $('#valor-fontSize').html(size);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="valor-fontSize">--px</p>
<input class="none" type="range" min="14" max="40" value="0" id="fader" step="1" >
    
<p id="v-28">
Após uma viagem que se prolongou por mais de nove anos e em que percorreu 4,8 mil milhões de quilómetros a New Horizons passou o mais perto de Plutão às 11:49 TMG (12:49 em Lisboa) em piloto automático, divulgou a NASA na rede social Twitter.
</p>

jsFiddle: http://jsfiddle.net/Lucp945b/4/

Note: Internet Explorer treats events in its own way that means in this case it is better to use input and change to have the behavior you need.