Slider

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

Volume33%

import { Slider } from "@chadcn/ui"
import { useState } from "react"

export function SliderDemo() {
  const [value, setValue] = useState([33])
  return (
    <div className="w-full max-w-sm space-y-2">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Volume</label>
        <span className="text-sm tabular-nums text-muted-foreground">
          {Math.round(value[0])}%
        </span>
      </div>
      <Slider value={value} onValueChange={setValue} max={100} step={1} />
    </div>
  )
}

How it works

Click and drag is disabled to prevent imprecise value selections. Instead, the thumb responds to cursor collision — swipe your cursor through it and it picks up your velocity naturally.
The thumb has built-in momentum and bounces off min/max boundaries, providing clear haptic-like feedback about the allowed range.
Tab focus is removed to prevent keyboard users from accidentally changing values, protecting form integrity in complex layouts.

Installation

Coming SoonPackage not yet published on npm.

pnpm add @chadcn/ui

Usage

import "@chadcn/ui/styles.css"
import { Slider } from "@chadcn/ui"

<Slider defaultValue={[33]} max={100} step={1} />

Coming SoonPackage not yet published on npm.

Examples

Range

Use an array with two values for a range slider.

import { Slider } from "@chadcn/ui"

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

Controlled

Use value and onValueChange to control the slider state.

Value: 50

import { Slider } from "@chadcn/ui"
import { useState } from "react"

export function SliderControlled() {
  const [value, setValue] = useState([50])
  return (
    <div className="w-full max-w-sm space-y-2">
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
      />
      <p className="text-sm text-muted-foreground">
        Value: {value[0]}
      </p>
    </div>
  )
}

Disabled

Use the disabled prop to disable the slider.

import { Slider } from "@chadcn/ui"

export function SliderDisabled() {
  return (
    <div className="w-full max-w-sm">
      <Slider defaultValue={[50]} max={100} step={1} disabled />
    </div>
  )
}

API Reference

See the Radix UI Slider documentation.