1
votes

Comment changer la taille du texte avec le curseur?

J'essaye d'écrire du code pour changer la taille du texte de manière dynamique avec un curseur mais cela ne fonctionne pas.

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

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

Quelqu'un peut-il offrir des conseils ici s'il vous plaît?

jquery html css

2 commentaires

cela fonctionne bien ici ...

@RohitVerma Je crois qu'ils veulent que cela change car le curseur ne bouge pas une fois que vous le relâchez

3 Réponses :

7
votes

L'événement onchange se déclenchera dès que vous relâcherez le bouton de la souris. Ce que vous voulez ici, c'est l'événement oninput qui se déclenchera dès que vous déplacerez le curseur.

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

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

0 commentaires

1
votes

Votre démo fonctionne très bien. Cependant, la nouvelle valeur est appliquée une fois que vous relâchez le curseur.
Si vous souhaitez mettre à jour la valeur instantanément, utilisez le entrée au lieu de change événement:

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

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

La différence est que, input se produit, lorsque la valeur est modifiée via l'interface utilisateur.
change d'autre part est déclenché, lorsque l'état de l'élément a changé.

0 commentaires

2
votes

Ajoutez simplement input comme événement également car change ne se déclenche que lorsque la souris est relâchée. J'ai également ajouté des étapes plus petites et une valeur de départ de min pour une meilleure convivialité.

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

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

Voici une implémentation JavaScript vanille au cas où quelqu'un chercherait cela:

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

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

Pour plus d'informations sur les différences entre les différents navigateurs, consultez événement onchange sur l'entrée type = range ne se déclenche pas dans Firefox lors du glissement

0 commentaires