How To create slider/toggle to change font size on screen with HTML CSS JS

Question

is there any way I can make this -->

so I'd like to make a slider/toggle and user can drag/slide it to change into different size (or point)

and for each point, the displayed text is changed just like the picture I describe

do I use HTML5 canvas? Or is there any way (maybe with js, to achieve that interactive toggle/slider manually adjust font size) for display preview?

thank you in advance!

Solution

You can achieve this using just plain HTML5 and JavaScript.

HTML5 has an input type called range, and it behaves exactly as you want for this example.

Note that according to CanIUse, the actual major browser support for input[type="range"] is: IE10+, FF23+ and Chrome 5+.

To achieve what you want you should first create the element:

<input type="range" min="12" max="42" id="slider" />

and then listen to its changes with js (I'm using jQuery for the example bellow):

$('#slider').on('change',function(){
    var val = $(this).val();
    //do the rest of the action...
});

Here is a working example of what you want: http://jsfiddle.net/vNfh2/1/

Comments

[Petr R.]

You should include the jQuery code here as well, and provide the jsFiddle link for reference.

[Bojangles]

You also need to mention that type="range" isn't supported in IE9 or below

[Skinny Totoro]

this also help, thank you so much :)

[whackamadoodle3000]

Is there a way to make this so that as you're sliding, the text changes size instead of it changing after you release the mouse?

[Claudio Holanda]

@whackamadoodle3000 yes, change the event change to input. Example