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

无人久伴 提交于 2021-02-06 12:51:13

问题


is there any way I can make this --> http://i.stack.imgur.com/IMkN3.png

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!


回答1:


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/




回答2:


You can use jQueryUI's slider to do this quite easily.

Here is a link to the web page jQueryUI Slider.

Put something in your HTML for the slider,

<div id="slider"></div>

Then put something like this in your JavaScript:

$( ".slider" ).slider({
  change: function( event, ui ) {
    $(<text div selector>).css("font-size",(ui.value+"px"));
  }
});


来源:https://stackoverflow.com/questions/18315749/how-to-create-slider-toggle-to-change-font-size-on-screen-with-html-css-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!