javascript - How to change font-size Text with <input type= range> using Jquery - Stack Overflow

admin管理员组

文章数量:1421161

I have HTML,I want to change font-size text "...." with input type=range when using 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");
});

});

thank U for watching.

I have HTML,I want to change font-size text "...." with input type=range when using 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");
});

});

thank U for watching.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 20, 2014 at 4:10 dacoten asked Jul 20, 2014 at 3:37 dacotendacoten 11522 silver badges1414 bronze badges 1

• <text> isn't a valid HTML element; is this SVG? If so, it needs the appropriate tag. – rvighne Commented Jul 20, 2014 at 4:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I know the question is asking about jQuery, but for anyone who finds this question while searching, here's an answer that doesn't use jQuery.

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

Then the following 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";
});

The input event is raised during dragging of the slider. The change event is only raised when dragging is pleted. Use whichever you prefer.

At first you are using wrong selector in jQuery event handler for listening to change event.

And in you case (i.e range) change event is triggered only after the mouse is released , so you can use input event to track the range change.

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

Here is the Working Fiddle

P.S

And if you want to use slider plugin , you could definitely try Slider | jQuery UI.

Hope this help your cause.

本文标签： javascriptHow to change fontsize Text with ltinput type rangegt using JqueryStack Overflow