Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/button, or use a direct registry URL from https://iconiqui.com/r/button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Slider

Horizontal range input with springy thumb motion and subtle track feedback. Great for volume, intensity, and any single numeric range.

Open in

Tide42

Nudge the line until it hums — spring-settled, thumb and fill in quiet agreement — one gesture, no sharp edges.

Installation

npx shadcn@latest add @iconiq/slider

Props

Slider

8 props

Pointer-driven range control with optional controlled or uncontrolled value management.

valuenumber

Controlled value. When provided, the parent owns the current position.

defaultValuenumber

Default50

Initial internal value used when value is not supplied.

minnumber

Default0

Lower bound used for clamping and display mapping.

maxnumber

Default100

Upper bound used for clamping and display mapping.

stepnumber

Default1

Step size applied after translating pointer position into a raw numeric value.

onChange(value: number) => void

Called whenever pointer interaction computes a new clamped value.

showValueboolean

Defaulttrue

Controls whether the live numeric readout is shown on the right side of the label row.

labelstring

Optional label shown on the left side of the header row above the track.

Notes

When value is undefined, the component stores the current value internally and updates it during drag operations.

The displayed number is derived from the animated motion value, so the readout stays in sync with the spring animation rather than jumping immediately.