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 SVG and JavaScript with a range input.
Radial UI Controls with HTML5, CSS, JS and SVG, Part 1
There are certain kinds of measurements, such as time, percentage, and angle, that are best displayed visually, often in an arc or circle. HTML5 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.
Auto-Generate Marks on HTML5 Range Sliders with JavaScript
Most web developers don’t realise that HTML5 range sliders can display graduation marks along their length by using an associated <datalist>: