Slider

An input where the user selects a value from within a given range.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/slider

Anatomy

Single import

Multiple imports

import { Slider } from "~/components/ui/slider";

<Slider.Root>
  <Slider.Track>
    <Slider.Filler />
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>;

Examples

Multiple Thumbs

Preview

Code

With Label

Preview

Code

Volume0%

Custom Stepping

Preview

Code

Rating0

Vertical

Preview

Code

Component slider-with-tooltip not found in registry.

Under Construction

This component is currently being built. Check back soon for updates!

API Reference

Slider.Root

Prop	Type	Default
`value`	`number \| number[]`
`defaultValue`	`number \| number[]`
`onChange`	`function`
`onChangeEnd`	`function`
`minValue`	`number`	`0`
`maxValue`	`number`	`100`
`step`	`number`	`1`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`isDisabled`	`boolean`
`children`	`ReactNode`

Slider.Track

Prop	Type	Default
`className`	`string`
`children`	`ReactNode`

Slider.Range

Prop	Type	Default
`className`	`string`

Slider.Thumb

Prop	Type	Default
`className`	`string`
`children`	`ReactNode`

Slider.Output

Prop	Type	Default
`className`	`string`
`children`	`ReactNode`

Slider.Header

Prop	Type	Default
`className`	`string`
`children`	`ReactNode`

Skeleton Spinner

On This Page

Installation
Anatomy
Examples
Multiple Thumbs
With Label
Custom Stepping
Vertical
With Tooltip
API Reference
Slider.Root
Slider.Track
Slider.Range
Slider.Thumb
Slider.Output
Slider.Header

Contribute