jquery - 如何使用 slider 更改文字大小？

Question

我正在尝试编写一些代码来使用 slider 动态更改文本的大小，但它不起作用。

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

有人可以在这里提供任何建议吗？

Answer 1

onchange 事件将在您释放鼠标按钮时立即触发。您在这里需要的是 oninput 事件，它会在您移动 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>