1. Docs
  3. Components
  5. Slider

Slider

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

Docs

Installation

npx shadcn@latest add @kanpeki/slider

Anatomy

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

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

Examples

Multiple Thumbs

With Label

Custom Stepping

Vertical

With Tooltip

Component slider-with-tooltip not found in registry.

SkeletonSpinner