‹ components

SizeSlider

draftv0.9.0·open in canvas

Percent-of-balance slider for trading forms, with major stops, sub-ticks, keyboard support, and a fixed value readout.

Installnpx shadcn add @cids/size-slider
Live demo
38%

Motion · tap to replay

honors reduced-motion

Track fill and thumb position transition at 150ms when not dragging. Dragging writes directly so the thumb stays under the pointer.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { SizeSlider } from "@/design-system";

<SizeSlider value={sizePct} onValueChange={setSizePct} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

defaultdraggingkeyboard focusdisabledstop activesub-ticks on/off.

Percent-of-balance slider for trading forms, with major stops, sub-ticks, keyboard support, and a fixed value readout.

Anatomy

0%       25%       50%       75%       100%
|---.---.---|---.---.---|---.---.---|---.---.---|
===============o                                      [ 38% ]

Props

PropTypeDefaultNotes
valuenumber--0-100; rounded and clamped.
onValueChange(value:number)=>void--Fires on drag, click, keyboard, or stop-label click.
stopsreadonly number[][0,25,50,75,100]Major labelled stops.
labelstringSize as percent of balanceSlider accessible name.
disabledbooleanfalseRemoves tab stop and dims the control.
showSubTicksbooleantrueThree sub-ticks per stop interval.
classNamestring--cn-merged.

Motion

Track fill and thumb position transition at 150ms when not dragging. Dragging writes directly so the thumb stays under the pointer.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.