Forms & selection@neumorphism-ui/slider

Slider

Built on Base UI Slider with both single-value and number[] range APIs. Creates one thumb per array item, names each input through thumbLabels, and supports horizontal or vertical orientation with controlled or uncontrolled values.

@neumorphism-ui/slider

Registry JSON

Preview

Price range₩32K – ₩72K

Vertical orientation

Installation

npx shadcn@latest add @neumorphism-ui/slider

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/slider @neumorphism-ui/label

Import

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

Example

<div className="grid gap-3">
  <div className="flex justify-between">
    <Label id="depth-label">Depth intensity</Label>
    <output>64%</output>
  </div>
  <Slider
    defaultValue={[64]}
    min={0}
    max={100}
    step={1}
    aria-labelledby="depth-label"
    thumbLabels={["Depth intensity"]}
  />
</div>

API Reference

Component	Prop	Type	Default	Description
`Slider`	`value / defaultValue`	`number[]`	`[min]`	The controlled value or initial uncontrolled value for each thumb.
`Slider`	`min / max`	`number`	`0 / 100`	The selectable numeric range.
`Slider`	`step`	`number`	`1`	The increment used for keyboard and pointer adjustment.
`Slider`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sets the track direction and keyboard axis.
`Slider`	`thumbLabels`	`readonly string[]`	`—`	Accessible names passed to the actual thumb inputs in value order.
`Slider`	`onValueChange / onValueCommitted`	`(value: number \| number[]) => void`	`—`	Provides the array of values while adjustment occurs or when it finishes.
`Slider`	`disabled`	`boolean`	`false`	Disables interaction for every thumb.