Basel Standard / Docs

Slider

Continuous range control for immediate numeric adjustment.

Review confidence64%

Sliders are useful when the value is numeric, bounded, and easier to tune by feel than by typing. They work well for density, opacity, thresholds, time windows, and similar controls where the user expects immediate visual feedback. The Swiss slider stays compact and plain so the value, not the chrome, carries the meaning.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Slider defaultValue={[64]} max={100} step={1} />

Why This Primitive Exists

Some values are easier to adjust continuously than through text fields or selects. The slider gives those controls a consistent track, range fill, and thumb treatment across settings-heavy interfaces.

Use it for bounded numeric adjustments with visible immediate effect.
Prefer it when small changes matter and the user benefits from dragging through the scale.
Avoid it for exact values that are faster to enter directly with an input.

Examples

Single Value

Always show the current value nearby. A slider without a visible readout makes the scale harder to understand.

Review confidence64%

<div className="flex items-center justify-between">
  <span>Review confidence</span>
  <span>64%</span>
</div>
<Slider value={[64]} max={100} step={1} />

Range Selection

The same primitive supports multi-thumb ranges when the user is defining an interval instead of one discrete point.

Editorial review window18-42 hrs

Range sliders work when the user is defining a bounded interval instead of choosing one discrete option.

<Slider value={[18, 42]} min={0} max={72} step={1} />

In Context

Sliders become more useful when paired with surrounding explanatory copy that tells the user what the number changes in the interface.

Tuning controls

Sliders work best when the value changes immediately and the scale is visible.

Pair the control with a label and current value so the adjustment remains understandable without guesswork.

Row density28 px

Contrast emphasis74%

<Slider value={[28]} min={20} max={40} step={1} />
<Slider value={[74]} min={0} max={100} step={5} />

Guidance

Make The Scale Explicit

Show the current value in text near the control.
Keep the minimum and maximum understandable from labels, helper text, or surrounding UI.
Use units when the number is not self-evident.

Choose Slider Only For Immediate Adjustment

Use it when the user can feel the result of the change right away.
Use an input when exact entry matters more than quick tuning.
Use radios or a select when the choices are few and discrete.

Keep Steps Intentional

Set step to the smallest meaningful increment.
Avoid overly fine scales that make keyboard and pointer adjustment tedious.
If two values are linked, consider a range slider rather than separate unrelated controls.

API Reference

`Slider`

Slider wraps @radix-ui/react-slider and accepts the full React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> API.

Prop	Type	Default	Notes
`value`	`number[]`	uncontrolled unless provided	Controlled slider value.
`defaultValue`	`number[]`	`undefined`	Starting value for uncontrolled use.
`onValueChange`	`(value: number[]) => void`	`undefined`	Fires during dragging and keyboard adjustment.
`min`	`number`	`0`	Lower bound.
`max`	`number`	`100`	Upper bound.
`step`	`number`	`1`	Increment size.
`disabled`	`boolean`	`false`	Disables thumb interaction.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Passed through from Radix.

The root also supports Radix slider props like minStepsBetweenThumbs, onValueCommit, name, and standard DOM attributes through the forwarded primitive.

Previous: Skeleton Next: Sonner