Input Range that increases text size

Question

Input Range that increases text size

Navigation

#1 by (2 votes)

3

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

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

Here is the code I have 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><pid="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 is an example in jsFiddle too: link

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

javascript html jquery

asked by anonymous 15.07.2015 / 10:37

1 answer

Remote Connection, C # with SQL Server (2008) How to do an update in the database on several tables related to codeigniter

score 2 · Accepted Answer

What you're missing then is to insert in the element #valor-fontSize the value of the input. You can do this with jQuery like this:

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

I used 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 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><pid="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: link

Note: Internet Explorer handles events in its own way, so in this case it's best to use input and change to get the behavior you need.