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.