Slider

Example#

Usage#

Use a slider to pick a value or a range where the rough position matters more than the exact figure: a budget, a team size, a timeline. For an exact number someone already knows, an Input with type="number" is faster.

• Default draws an 8 px track, a 28 px disc thumb and a value chip above the thumb while it moves or holds focus.
• variant="ruler" is the estimator's printer's ruler: minor ticks every step, labelled major ticks at marks, and a carriage thumb that holds the formatted value.
• Ranges. Pass [lo, hi] as the value for two thumbs; each thumb gets its own name through thumbLabels.
• format prints the value everywhere it shows, in the chip, the carriage and aria-valuetext, so a screen reader hears "$6,500", not "6500".
• Phones. The thumb's hit area is 44 px; below 30rem the ruler drops minor ticks and labels every other major one.

Anatomy#

Volume#

Reading layer: the track, the thumb and the ruler print the same at every volume.

• Quiet

  $6,500

  $1k$10k$20k

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  $6,500

  $1k$10k$20k

  The site default. Art on its own plates, one display moment per view.

• Press

  $6,500

  $1k$10k$20k

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  $6,500

  $1k$10k$20k

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• The label names the quantity and its unit lives in format: "Budget" with "$6,500", never "Budget ($)".
• Mark only the values people reason with: the ends and one or two round numbers.
• Prices stay literal (D-I2): a slider that sets a budget shows the real figure, not "a bit" or "loads".

Do and don't#

Accessibility#

• Each thumb is a slider with aria-valuetext from format, so prices are read as prices.
• Inside Field the thumbs take the field's label; range thumbs add "minimum" and "maximum".
• Thumb hit areas are 44 px.

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

Props#

Tokens#

Changelog#