Easy Shadcn

Slider keeps the common scalar control small and adds an explicit multi-thumb branch for ranges and thresholds. Both modes provide a visible label, live value, native form inputs, and Base UI's keyboard and pointer behavior.

Basic

Volume40

Controlled

Temperature20

Controlled value: 20

Custom bounds and steps

Zoom100

Multi-thumb range

Price range20 – 80

Hidden value

Opacity

Disabled

Unavailable volume30

Vertical

Vertical volume60

Native form

Installation

With the @easy-shadcn namespace configured:

pnpm dlx shadcn@latest add @easy-shadcn/slider

Or install via the full URL:

pnpm dlx shadcn@latest add https://easy-shadcn.vercel.app/r/slider.json

The shadcn slider primitive is installed automatically.

Scalar mode

The base case remains label plus optional scalar state. Omitting multiple preserves the original number value and callback types.

<Slider label="Volume" />

<Slider
  label="Temperature"
  onValueChange={setTemperature}
  value={temperature}
/>

An uncontrolled scalar starts at defaultValue ?? min. The visible value follows accepted primitive changes; calling details.cancel() in onValueChange leaves both primitive state and the visible mirror unchanged.

Multi-thumb mode

Add multiple to switch values and callbacks to number[]. thumbLabels is required so assistive technology can distinguish every thumb. Use at least two values and names for a multi-thumb control; the rendered thumb count follows the value array length.

<Slider
  defaultValue={[20, 80]}
  label="Price range"
  minStepsBetweenValues={5}
  multiple
  thumbCollisionBehavior="none"
  thumbLabels={["Minimum price", "Maximum price"]}
/>

Without value or defaultValue, multi mode starts at [min, max]. It supports any thumb count, not only two-value ranges:

<Slider
  label="Thresholds"
  multiple
  thumbLabels={["Low", "Target", "High"]}
  value={[10, 40, 90]}
/>

The live value uses raw numbers joined by an en dash, such as 10 – 40 – 90. Formatting remains a Primitive escape path.

Shared props

Prop	Type	Default	Description
`label`	`ReactNode`	required	Visible name for the scalar control or multi-thumb group.
`showValue`	`boolean`	`true`	Shows the current scalar or en-dash-separated array beside the label.
`min`	`number`	`0`	Minimum allowed value. Must be less than `max`.
`max`	`number`	`100`	Maximum allowed value. Must be greater than `min`.
`step`	`number`	`1`	Normal pointer and keyboard increment.
`largeStep`	`number`	`10`	Page Up / Page Down and Shift + Arrow increment.
`disabled`	`boolean`	`false`	Disables interaction and form controls.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Primitive orientation. Give vertical sliders a height through `className`.
`thumbAlignment`	`"center" \| "edge" \| "edge-client-only"`	`"edge"`	Thumb alignment; `edge` matches shadcn.
`name`	`string`	-	Native form field name. Multi mode submits one value per thumb under the same name.
`form`	`string`	-	Owning form id when rendered outside the form.
`aria-labelledby`	`string`	-	External naming ids merged with the generated visible-label relationship.
`className`	`ClassValue`	-	Class override for the Slider primitive root.
`labelClassName`	`ClassValue`	-	Class override for the visible label.
`valueClassName`	`ClassValue`	-	Class override for the live value.

Other safe primitive-root props such as id, style, non-state data attributes, and root event handlers are forwarded.

Discriminated value props

Mode	Value props	Mode-only props
`multiple` omitted or `false`	`value?: number`, `defaultValue?: number`, scalar callbacks	none
`multiple={true}`	`value?: number[]`, `defaultValue?: number[]`, array callbacks	required `thumbLabels`; optional `minStepsBetweenValues`, `thumbCollisionBehavior`

thumbCollisionBehavior follows Base UI: "push" lets a dragged thumb push others, "swap" swaps positions, and "none" prevents crossing. minStepsBetweenValues counts step intervals rather than raw units.

Accessibility, forms, and SSR

Scalar mode associates the visible label with its one nested range input. Multi mode names the Base UI slider group with the visible label and gives every thumb input its own thumbLabels[index] name. A missing, blank, or short runtime label array falls back to Value N instead of throwing, but callers should supply distinct contextual names such as “Minimum price” and “Maximum price”.

Every multi thumb has an explicit Base UI index, so the correct inputs and names are present in server markup before hydration. With name, browsers submit each thumb as a same-name form entry; use FormData.getAll(name) to read the array.

The primitive preserves Arrow, Page Up / Down, Shift + Arrow, Home, and End behavior. It owns bounds, step validation, sorting, focus, pointer dragging, collision handling, and cancelable event details.

Ownership and escape path

Compose owns the label/value layout, thumb count, thumb names, indices, primitive descendants, state markers, numeric ARIA, and group name. className still targets the Slider root rather than the outer layout.

Use components/ui/slider or Base UI parts directly for custom formatting or locale, marks, ticks, tooltips, editable numeric inputs, thumb-specific visual props, descriptions and validation messages, arbitrary descendants, or a replaced root.

Slider