What are the steps to adjust text size using a slider?

Question

What are the steps to adjust text size using a slider?

I'm having trouble coding a feature that changes the text size dynamically with a slider, and it's not working as expected.

$('input').on('change', function() {
  var textSize = $(this).val();
  $('.userText p').css('font-size', textSize + '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>

Any advice or suggestions would be greatly appreciated!

jquery html css

Answer 1

Answer №1

Once the mouse button is released, the onchange event will be triggered. However, to have the event fire as you slide the slider, you should utilize the oninput event instead.

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

Answer 2

Once the mouse button is released, the onchange event will be triggered. However, to have the event fire as you slide the slider, you should utilize the oninput event instead.

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

Answer 3

Answer №2

Include the input event along with the change event, as the latter only triggers when the mouse is released. It's also helpful to add smaller step increments and a starting value equal to the minimum for improved user experience.

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>

To explore variations in browser behavior, check out this discussion on onchange event behavior with input type=range not triggering in Firefox while dragging.

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

Answer 4

Include the input event along with the change event, as the latter only triggers when the mouse is released. It's also helpful to add smaller step increments and a starting value equal to the minimum for improved user experience.

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>

To explore variations in browser behavior, check out this discussion on onchange event behavior with input type=range not triggering in Firefox while dragging.

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

Answer 5

Answer №3

Great job on your demo! Just a heads up, the new value is only applied after releasing the slider.
To update the value instantly, consider using 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 key difference is that input triggers when the user interface changes the value, while change fires when the element's state has been altered.

Answer 6

Great job on your demo! Just a heads up, the new value is only applied after releasing the slider.
To update the value instantly, consider using 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 key difference is that input triggers when the user interface changes the value, while change fires when the element's state has been altered.

What are the steps to adjust text size using a slider?

Answer №1

Answer №2

Answer №3

Similar questions

Div not centered after translation by 50% on the Y-axis

Concealing a div on submission and passing data to PHP

Data not displaying in selected option after selection

What is the best way to display a background image within my div element?

My Javascript file is not being recognized by MVC

Retrieve the href attribute using jQuery when clicked

Using data binding in VueJS to construct a dynamic URL

Positioning the tiny rectangle containing the information icon within the larger horizontal rectangle

Can React components receive props or data when they are inserted into regular HTML code?

clear background with logo embossed

"Efficiently manage search suggestions and arrange outcomes for autofill text input utilizing jQuery

Using Django, CSS, and Javascript, create a dynamic HTML form that shows or hides a text field based on the selection

"Utilizing jQuery AJAX to enable multiple file uploads with specific file extensions

The phone number is not able to be clicked on

The inactive submit button due to an unfinished form is not functioning as expected

How can ngValue be leveraged with Angular Material's autocomplete feature?

Error with HTML form validation

The drop-down items on the navigation bar disappear too quickly

Trouble getting RMarkdown function to generate plots and convert to HTML

Load jQuery core asynchronously with a backup plan