如何使用更改字體大小的文本 <input type= range> 使用jQuery

Question

我有HTML，我想在使用Jquery時使用輸入類型=范圍更改字體大小的文本“ ....”

HTML

<div class="font-size"><p>Font size:</p><output for="fader" id="fontsize">50</output></div>
<input class="none" type="range" min="0" max="100" value="0" id="fader" step="1" onchange="outputbox01(value)">
<text id="v-28" class="changeMe" y="0.8em" fill="white" stroke="black" stroke-width="0" transform="translate(35,20.5) ">This is the text you want to change the font size</text>

JavaScript的

function outputbox01(vol) { document.querySelector('#fontsize').value = vol; }

$(document).ready(function() {
    $("#fontsize").change(function () {
    $('#v-28').css("font-size", $(this).val() + "px");
});

}）;

謝謝你的收看

Answer 1

首先，您在jQuery事件處理程序中使用錯誤的選擇器來偵聽change事件。

而且在您的情況下（即range ），只有在釋放鼠標之后才觸發change事件，因此您可以使用input事件來跟蹤范圍變化。

$("#fader").on("input change",function () {
        $('#v-28').css("font-size", $(this).val() + "px");
});

這是工作小提琴

PS

而且，如果您想使用Slider插件，則可以嘗試使用Slider | Flash Player。 jQuery UI 。

希望這對您的事業有所幫助。

Answer 2

我知道問題是關於jQuery的，但是對於在搜索時發現此問題的任何人，這是一個不使用jQuery的答案。

<input type="range" min="12" max="72" value="16" id="font-size" />

然后是以下JavaScript：

var slider = document.getElementById('font-size');

slider.addEventListener('input', function() {
    var size = slider.value;
    // this sets the body's font size property, but you can set whatever you need to
    document.body.style.fontSize = size + "px";
});

拖動滑塊時引發input事件。 僅在拖動完成后才引發change事件。 使用您喜歡的任何一種。