Docs
Components
Slider

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!

Skeleton Spinner

On This Page

Installation
Anatomy
Examples
Multiple Thumbs
With Label
Custom Stepping
Vertical
With Tooltip

Contribute

Report an issue
Request a feature
Edit this page