Spectrum

Open in playground

A slider between two labeled poles. Surfaces shades of grey that a radio group collapses — neither ‘A nor B’ but ‘slightly toward A’. Pole tiles light up as the slider crosses the midpoint.

Preview

What's your building philosophy?

Drag the slider to where you sit on the spectrum.

Move fast

Ship now, fix later

Methodical

Measure twice, cut once

Usage

import { Spectrum } from "@/components/socratic-ui/spectrum";

<Spectrum
  question="What's your building philosophy?"
  leftLabel="Move fast"
  leftDescription="Ship now, fix later"
  rightLabel="Methodical"
  rightDescription="Measure twice, cut once"
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the slider.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`leftLabel`required Label for the low end of the slider.	`string`	`—`
`leftDescription` Optional one-liner describing the left pole.	`string`	`—`
`rightLabel`required Label for the high end of the slider.	`string`	`—`
`rightDescription` Optional one-liner describing the right pole.	`string`	`—`
`min` Minimum slider value.	`number`	`0`
`max` Maximum slider value.	`number`	`100`
`step` Step increment between slider stops.	`number`	`1`
`value`required Current slider value.	`number`	`—`
`onChange`required Called as the slider moves.	`(value: number) => void`	`—`
`number` Optional leading question number.	`string`	`—`
`motion` Opt-in entrance animation config. Omit for static rendering; pass `{ enabled: true }` (or a preset from `motion.ts`) to animate in on mount.	`SocraticMotion`	`—`