Slider

An input for choosing a numeric value from a range.

import { Slider } from '@/components/ui/slider'

export default function SliderDemo() {
  return <Slider defaultValue={50} max={100} step={1} className="max-w-sm" />
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/slider.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Slider imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Slider } from '@/components/ui/slider'

<Slider defaultValue={50} max={100} step={1} />

// Range slider — pass an array for two thumbs
<Slider defaultValue={[25, 75]} max={100} step={1} />

Examples

Range (two thumbs)

import { Slider } from '@/components/ui/slider'

export default function SliderRange() {
  return <Slider defaultValue={[25, 75]} max={100} step={1} minStepsBetweenValues={5} className="max-w-sm" />
}

API Reference

Name	Type	Default	Description
value / onValueChange	number \| number[] / (value) => void	—	Controlled value — an array renders one thumb per entry.
defaultValue	number \| number[]	0	Initial value (uncontrolled).
min / max	number	0 / 100	The allowed range.
step	number	1	Granularity the value snaps to.
minStepsBetweenValues	number	0	Minimum gap between thumbs on a range slider.
disabled	boolean	false	Ignores user interaction.