Slider
Pick a value or a range by dragging, for settings where the rough position matters more than the exact number.
npx prodular-ui add sliderSingle value
Show the current value next to the label.
30 days
Older request logs are deleted every night at 02:00 UTC.
"use client"
import * as React from "react"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"import { Slider } from "@/components/ui/slider"
export default function SliderDefault() { const [value, setValue] = React.useState(30) return ( <Field className="max-w-sm"> <div className="flex items-center justify-between"> <FieldLabel>Log retention</FieldLabel> <span className="text-sm text-muted-foreground tabular-nums">{value} days</span> </div> <Slider value={value} onValueChange={(v) => setValue(v as number)} min={7} max={90} step={1} /> <FieldDescription>Older request logs are deleted every night at 02:00 UTC.</FieldDescription> </Field> )}Range and disabled
120 to 480 ms
"use client"
import * as React from "react"
import { Field, FieldLabel } from "@/components/ui/field"import { Slider } from "@/components/ui/slider"
export default function SliderRange() { const [range, setRange] = React.useState([120, 480]) return ( <div className="flex w-full max-w-sm flex-col gap-8"> <Field> <div className="flex items-center justify-between"> <FieldLabel>Response time</FieldLabel> <span className="text-sm text-muted-foreground tabular-nums"> {range[0]} to {range[1]} ms </span> </div> <Slider value={range} onValueChange={(v) => setRange(v as number[])} min={0} max={1000} step={10} /> </Field> <Field disabled> <FieldLabel>Sample rate</FieldLabel> <Slider defaultValue={[25]} disabled /> </Field> </div> )}Anatomy
<Field> <FieldLabel>Log retention</FieldLabel> <Slider defaultValue={30} min={7} max={90} /></Field>Guidance
Use it when
- Bounded values that people adjust by feel: retention, thresholds, volume, price ranges.
Avoid
- Exact values such as a price or a quantity. Use Input type="number".
- Unbounded values.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Pass a number for one thumb or an array of two numbers for a range.
- Always show the current value as text next to the label, with tabular-nums and the unit.
- Set min, max and step to real units (days, ms), never 0 to 100 by default.
- Inside Field the label is linked automatically. Outside Field, add aria-label.
API
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | number[] | One number for a single thumb, two for a range. | |
| onValueChange | (value: number | number[]) => void | Called while dragging. | |
| min / max / step | number | 0 / 100 / 1 | Bounds and increment. |
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the track. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add slider# or, with the registry in components.jsonnpx shadcn@latest add @prodular/slider