How to change text size with slider?

Question

I am trying to write some code to change the size of text dynamically with a slider but it's not working.

$('input').on('change', function() {
  var v = $(this).val();
  $('.userText p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" min="1.2" max="2.6" step=".2" id="slider" />
<div class="userText">
  <p>Some text that should dynamically change size</p>
</div>

Can anyone offer any advice here please?

@RohitVerma I believe they want it to change as the slider moves not once you release it — depperm, May 16 '19 at 13:03

score 8 · Accepted Answer · answered May 16 '19 at 13:03

The onchange event will fire as soon as you release the mouse button. What you want here is the oninput event which will fire as soon as you move the slider.

$('input').on('input', function() {
  var v = $(this).val();
  $('p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1.2" max="2.6" step=".2" id="slider" />

<p>Some text that should dynamically change size</p>

leonheess · Answer 2 · 2022-08-30T06:48:27.440

Just add input as an event as well because change only fires when the mouse is released. I also added smaller steps and a start value of min for better usability.

document.querySelector('input').addEventListener('input', e => document.querySelector('p').style.fontSize = e.target.value + 'em');

<input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
<p>Some text that should dynamically change size.</p>

For more information on differences across different browsers see onchange event on input type=range is not triggering in Firefox while dragging.

jQuery:

$('input').on('input', e => $('p').css('font-size', $(e.target).val() + 'em'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
<p>Some text that should dynamically change size.</p>

score 1 · Answer 3 · answered May 16 '19 at 13:04

Your demo works just fine. However the new value get's applied once you release the slider.
If you want to update the value instantly, use the input event instead of the change event:

$('input').on('input', function() {
    var v = $(this).val();
    $('p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1.2" max="2.6" step=".2" id="slider" />

<p>Some text that should dynamically change size</p>

The difference is, input occurs, when the value is changed through the user interface.
change on the other hand is fired, when the state of the element has changed.

How to change text size with slider?

3 Answers3