Skip to content
Pinky UI

forms

Range Composer

Two value endpoints share one readable track and preserve their order while either value is edited.

  • forms
  • range
  • paired-values
  • numeric
  • composition
Related pattern

Paired endpoint composition with ordering; it is not a cosmetic dual-range slider.

Live preview

Range

10–40 px · endpoints stay ordered.

Quick usage

usage
import { RangeComposer } from "@pinky-ui/systems";

<RangeComposer label="Canvas width" defaultStart={320} defaultEnd={960} unit="px" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
onRangeChange(range: { start: number; end: number }) => void—Receives the ordered endpoint pair after either value changes.
classNamestring—Styles the outer interaction surface.

Accessibility

  • From and To are separately labelled native number inputs with a readable ordered summary.
  • The range relationship is expressed by text and endpoint labels, not only a coloured band.

Performance

  • One pair of numbers controls one small track; no continuous animation or global gesture listener is used.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Dimensions, durations, prices and other paired endpoint values

When not to use

  • A single bounded number or an unstructured dual slider

Skill

Purpose

Use Range Composer when two endpoints form one logical value such as a price, duration or dimension range.

Interaction

Keep From and To editors paired on one track. Editing either endpoint clamps the pair so the relationship stays ordered and the summary remains readable.

Usage

tsx
<RangeComposer label="Canvas width" defaultStart={320} defaultEnd={960} unit="px" />

Accessibility

Label both native number inputs and repeat the ordered range in text. The visual band is supplementary; endpoints and their values must remain understandable without it.

Reduced motion

Update the band and summary directly. Do not rely on animated endpoint travel to explain the new range.

Open this skill on its own page