Inspector Range

About this component

Settings row for a span rather than a value: two thumbs on the row itself, the band between them filling it, and both ends of the pair read out on the right. Ticks, tones and thumb states follow inspector-slider exactly, appearing on hover.

Usage

The import and the props worth knowing about, in one place.

import { InspectorRange } from "@/components/beste/component/inspector-range";

// Uncontrolled
<InspectorRange label="Price" min={0} max={300} step={5} defaultValue={[40, 220]} unit="$" />

// Controlled, with a separate commit for expensive work
<InspectorRange
  label="Duration"
  value={window}
  onValueChange={setWindow}                             // every thumb move
  onValueCommit={(value) => console.log("fetch", value)} // on release
  min={0}
  max={60}
  step={1}
  unit="s"
/>

<InspectorRange
  label="Opacity"
  icon={Contrast}                                 // optional leading icon
  min={0}
  max={1}
  step={0.05}
  separator="to"                                  // "–" by default
  formatValue={(value) => `${Math.round(value * 100)}%`}
  minStepsBetweenThumbs={2}                       // keeps the thumbs apart
  ticks={false}                                   // true by default: they show on hover
  value={opacity}
  onValueChange={setOpacity}
  tone="outline"                                  // "muted" (default) | "outline" | "ghost"
  size="sm"                                       // "sm" | "default" | "lg"
/>

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

Tab	Move between the two thumbs.
Arrow keys	One step on the focused thumb.
Home / End	Send the focused thumb to its end of the range.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`label`*	`string`	—	Label rendered on the left, inside the row.
`icon`	`LucideIcon`	—	Optional leading icon shown before the label.
`value`	`[number, number]`	—	Controlled pair, low then high. Pair it with `onValueChange`.
`defaultValue`	`[number, number]`	—	Initial pair in uncontrolled mode. Falls back to the whole range.
`onValueChange`	`(value: [number, number]) => void`	—	Fires on every thumb move.
`onValueCommit`	`(value: [number, number]) => void`	—	Fires when a thumb is released. Use it for work too expensive per frame.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Smallest increment. Also drives how many decimals the readout shows.
`formatValue`	`(value: number) => string`	—	Format each end of the readout. Defaults to the number plus `unit`.
`unit`	`string`	—	Suffix on the default readout, e.g. "px", "%".
`separator`	`string`	—	Text between the two numbers.
`ticks`	`boolean \| number \| number[]`	`true`	Tick marks inside the row: `true` for automatic (one per step up to 12, otherwise deciles), a count, an explicit list of values, or `false`. They appear on hover, as they do on the single slider.
`minStepsBetweenThumbs`	`number`	`1`	Steps to keep between the thumbs, so they cannot cross or stack.
`disabled`	`boolean`	—	Block interaction and dim the row.
`tone`	`"muted" \| "outline" \| "ghost"`	`"muted"`	Surface treatment: filled (default), hairline outline, or bare.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Row height preset.
`name`	`string`	—	Name of the underlying inputs, so the row can take part in a form.
`className`	`string`	—
`aria-label`	`string`	—	Accessible name. Falls back to `label`.

More Inspector components

View all Inspector

Dark Mode

OffOn