Slider

A draggable range input, the shadcn/ui slider over Radix. In a demo it usually drives page state through a ::Slider directive.

Total bill ($)

::Slider[bill]{label="Total bill ($)" min=5 max=60 step=1 default=25}

The directive vs. the component

The ::Slider[key] directive is the shortcut: it injects a useState (in .mdx) or binds page state (in page.py) and hands you the value back under key. Under it sits the plain Radix component, which you can drop in directly and wire yourself. value is an array, and onValueChange reports every move.

import { Slider } from "@/components/ui/slider";

// value is an array; the slider supports multiple thumbs.
<Slider
  min={5}
  max={60}
  step={1}
  value={[bill]}
  onValueChange={(v) => setBill(v[0])}
/>

Props

The component forwards every Radix Slider prop. The ones you'll reach for:

Prop	Type	Notes
`value` / `defaultValue`	`number[]`	Controlled / uncontrolled thumb positions. One entry per thumb.
`onValueChange`	`(value: number[]) => void`	Fires on every drag; commit-only via `onValueCommit`.
`min` / `max`	`number`	Track bounds; default `0` and `100`.
`step`	`number`	Granularity of each move.
`orientation`	`"horizontal"` \| `"vertical"`	Vertical sliders get a min height automatically.
`disabled`	`bool`	Dims the track and blocks interaction.

Directive params

The ::Slider[key] / c.Slider form takes label, key, min, max, step, and default, and returns the current value bound to key.

Installation

Slider is a shadcn/ui component. Add it with the CLI, then import it where you need it. A plain React component, so unlike the auto-registered n6k tags it takes an import line at the top of your .mdx or .tsx:

bunx shadcn@latest add slider

import { Slider } from "@/components/ui/slider";

The ::Slider directive itself needs nothing extra. It resolves through the Controls namespace already registered in src/app/mdx-components.tsx.