This example show how to implement a slider using HTML5 and JavaScript. To demonstrate the effect, code from "
jQuery exercise: change font-size" is borrowed, to change text size when slide is changed.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}
#mytext {
font-size: 20px
}
</style>
</head>
<body>
<center>
<input id="slide" type="range" min="8" max="50" value="20"? onChange="changeTextSize(this.value)" step="1"/>
<p id="mytext">Change TEXT size by Slider</p>
</center>
<script>
function changeTextSize(fontsize) {
$("#mytext").css("font-size", fontsize+"px");
}
</script>
</body>
</html>
No comments:
Post a Comment