Slider

A strict, minimalist slider for numerical input.

A utilitarian slider. It rejects rounded corners, employing a harsh rounded-none geometry across both the track and the thumb, aligned with the Monolith specification.

Volume

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/slider.json"

Usage

import { Slider } from "@/components/ui/slider"
 
export function SliderDemo() {
  return (
    <Slider defaultValue={[50]} max={100} step={1} />
  )
}

Examples

Range (Multi-Thumb)

When multiple values are provided to defaultValue or value, the slider automatically renders multiple thumbs, making it ideal for range selections like pricing.

Price Range$25 - $75

Vertical

By passing the orientation="vertical" prop, the slider adjusts its tracking dimensions automatically.

API Reference

The Slider component uses Radix UI Primitives. For a complete API reference, please refer to the Radix UI Slider Documentation.

Prop	Type	Default	Description
`value`	`number[]`	-	The controlled value of the slider.
`defaultValue`	`number[]`	-	The value of the slider when initially rendered.
`onValueChange`	`function`	-	Event handler called when the value changes.
`min`	`number`	`0`	The minimum value for the range.
`max`	`number`	`100`	The maximum value for the range.
`step`	`number`	`1`	The stepping interval.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the slider.

Skeleton Sonner

On This Page

Installation Usage Examples Range (Multi-Thumb)Vertical API Reference