From the course: Creating Photo Card Titles with HTML5

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Adding range sliders

Adding range sliders

Right now we're using a standard input text field to determine the font size of our caption. Not only is that pretty mundane, it's also fairly user-hostile. If your website visitor is web savvy, they may enter 48 pixels, but do they spell out pixels or do they enter the abbreviation, px? And if he or she is from the print world, they may think in terms of points. Most others however, would probably enter a measurement in either inches or centimeters. All in all, we're looking at the possibility of entry errors galore. Luckily, HTML5 provides a much more intuitive visual method for selecting a font size: the input type range, which is displayed in compliant browsers as a slider. In this lesson, I'll show you how to change a text input field to a slider and clue you in to a way to avoid a massive cross-browser failure. We'll start by going to the modify.php page from the Chapter 2/02_02 folder and then scroll down. I am going to go down to around line 95, which is where my current font…

Contents