RulerReadout

Example#

Volume

Paper

Colourway

Your estimate

$3,200 to $4,800

Live render of examples/ruler-readout/basic.tsx

Usage#

Use the ruler readout to report a range the page has worked out, such as the estimator's price band. The numbers come first as visible text; the ruler underneath is a picture of where the band sits.

Read-only. It never takes input; to let people choose a value, use Slider.
Sticky. On the estimator it sits in a sticky plate, so the answer stays in view while the questions change it.
Format once. format prints both ends ("$3,200 to $4,800"); toLabel changes the joining word for other languages.

Anatomy#

Your estimate

$3,200 to $4,800

LabelWhat the band is..mk-ruler-readout-label
ValueBoth ends as text, in the numeral role..mk-ruler-readout-value
RulerThe band between two end ticks; hidden from assistive tech..mk-ruler-readout-ruler

Volume#

Reading layer: identical at every volume.

Quiet
Your estimate
$3,200 to $4,800
Docs, forms, legal and long reads. Flat inks, no art in motion.
Studio
Your estimate
$3,200 to $4,800
The site default. Art on its own plates, one display moment per view.
Press
Your estimate
$3,200 to $4,800
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
Your estimate
$3,200 to $4,800
Launches, posters and the 404. Every ink, and the words still win.

Content#

Say what the band is in the label: "Your estimate", not "Range".
Write both ends in full with the currency: "$3,200 to $4,800".
If the band is an estimate, say so nearby in words; the ruler never carries a caveat by itself.

Do and don't#

Your estimate

$3,200 to $4,800

Real figures, both ends.

Don't

Somewhere in the low thousands.

A joke where the price should be.

Prices are in the literal zone (D-I2). The joke can sit beside the readout; the numbers themselves stay exact.

Accessibility#

The numbers are text; the ruler drawing is hidden from assistive tech.
Prices stay literal.

Keys	What happens
(none)	Not interactive

The colour pairs it prints, with their contrast on both papers:

Text	Surface	Role	Bone	Night
`--mk-text`	`--mk-surface`	ui	not in this look	not in this look
`--mk-text-2`	`--mk-surface`	ui	not in this look	not in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

Prop	Type	Default	Description
`min` required	`number`	none
`max` required	`number`	none
`value` required	`number \| readonly [number, number]`	none	One value, or the band `[lo, hi]`.
`marks`	`readonly SliderMark[]`	none
`format`	`((value: number) => string)`	none
`toLabel`	`string`	`"to"`	Joins the band's ends (default "to").
`label`	`string`	none	An optional caption above the numbers, e.g. "Your estimate".

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from RulerReadoutProps in packages/overprint-react/src/reading/ruler-readout/ruler-readout.tsx.

Tokens#

System tokens (20)

Scanned from its CSS at build and checked against its registry entry; 16 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.