While we usually assume that most numerical form controls are understandable to users, a graphical readout can provide a useful visual correlation and guide, especially when dealing with a wide range of values. Like the previous radial example, this one uses and JavaScript with a range input.


There are certain kinds of measurements, such as time, percentage, and angle, that are best displayed visually, often in an arc or circle. doesn’t feature a native radial control, but that doesn’t prevent you from creating your own; in this example, I’ll show how to present an interactive percentage or timer value.