Create customizable number lines with tick marks, labels, fractions, and highlighted intervals for math education.
This tool draws a horizontal number line to your specifications: a start and end value, a tick spacing, and what to write under the ticks - integers, decimals, fractions, or nothing. You can also mark one or more intervals with a colored band, and the finished line renders as a graphic, ready to print or drop into a worksheet. The thing people most often misjudge is the off-by-one: a setting that asks for a tick count usually means intervals, so ten ticks produce eleven marks. And a fraction label lands exactly on a tick only when the fraction is a whole multiple of the step you chose.
A concrete input and expected output from the current implementation.
Input
Line from -1 to 1, tick every 0.25, label every 4th tick as a decimal, highlight the interval from -0.5 to 0.5
Expected output
A horizontal number line with nine ticks at -1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1; labels under -1, 0, and 1 only; and a filled band covering the four intervals between -0.5 and 0.5.
The range is 2 units wide and the step is 0.25, so the line holds 8 intervals and 9 ticks. The band starts at the third tick and ends at the seventh, covering 4 of the 8 intervals, exactly half the line.
Minimum, maximum, and step define the line. Ticks sit at every multiple of the step within the range, so the tick count is (max - min) / step + 1. Each tick's position is its share of the range, (value - min) / (max - min), as a fraction of total width. When the step does not divide the range evenly, the last interval falls short and the endpoint is not a tick.
Labels can be integers, decimals, or fractions. A fraction label is placed at its decimal value, so it sits exactly on a tick only when the fraction is a whole multiple of the step; otherwise it falls between ticks. Highlighted intervals render as a colored band between two values, with edges on the nearest ticks. A label-every-Nth-tick option keeps dense lines readable.
Yes. The range simply starts below zero, for example -5 to 5, and the same tick math applies. One practical point: label zero when the line crosses it, because students read the negative side by counting away from zero. A line with negative ticks but no labeled zero is easy to misread, so set the label interval so that zero falls on a labeled tick.
Because the label is placed at its decimal value, and it lands on a mark only when that value is an exact multiple of the step. One-third on a tenths-stepped line has the value 0.333..., which sits between the 0.3 and 0.4 ticks. Choose a step the denominator divides evenly, such as twelfths for thirds, or accept the off-tick position.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Interactive periodic table - click elements, enter quiz mode, and guess elements from their properties. Gamified learning.
Explore the periodic table with element details, properties, and category filtering.
Browse and search ASCII, Unicode, and binary character codes with copy-to-clipboard.
Test your knowledge of semantic HTML elements with quizzes and best-practice tips.
Structured typing lessons with finger placement guide. Track WPM improvement over time with localStorage persistence.
Timed multiplication drills with accuracy tracking per table (1-12). Progress chart saved across sessions.