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
From the course: Creating Photo Card Titles with HTML5
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.