Slider

Selects a value or range on a track between a minimum and maximum.

Volume40

slider-demo.tsx

"use client";import { Slider } from "@/components/vip-ui/slider";export function SliderDemo() {  return (    <Slider      label="Volume"      minValue={0}      maxValue={100}      defaultValue={40}      className="w-full max-w-sm"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-slider.json

Composition

Slider
Owns the values. Without children, it renders a label, value, and one handle per value.
- SliderLabel
- SliderValue
- SliderTrack
  - SliderRail
    - SliderRange
  - SliderHandleRepeats
    One per value. Set index on each.
- SliderMarksOptional

Range

Use thumbLabels to give each handle a name.

Price$200 – $800

slider-range-demo.tsx

"use client";import { Slider } from "@/components/vip-ui/slider";export function SliderRangeDemo() {  return (    <Slider      label="Price"      defaultValue={[200, 800]}      minValue={0}      maxValue={1000}      step={10}      thumbLabels={["Minimum price", "Maximum price"]}      formatOptions={{        style: "currency",        currency: "USD",        maximumFractionDigits: 0,      }}      className="w-full max-w-sm"    />  );}

Marks

Set step to the mark interval so the handle stops on each mark.

Opacity50%

slider-step-demo.tsx

"use client";import { Slider } from "@/components/vip-ui/slider";export function SliderStepDemo() {  return (    <Slider      label="Opacity"      defaultValue={0.5}      minValue={0}      maxValue={1}      step={0.25}      marks={[0, 0.25, 0.5, 0.75, 1]}      formatOptions={{ style: "percent" }}      className="w-full max-w-sm"    />  );}

Vertical

Bass+4

Mid-2

Treble+6

slider-vertical-demo.tsx

"use client";import { Slider } from "@/components/vip-ui/slider";const bands = [  { label: "Bass", value: 4 },  { label: "Mid", value: -2 },  { label: "Treble", value: 6 },];export function SliderVerticalDemo() {  return (    <div className="flex gap-8">      {bands.map((band) => (        <Slider          key={band.label}          label={band.label}          orientation="vertical"          defaultValue={band.value}          minValue={-12}          maxValue={12}          fillOffset={0}          formatOptions={{ signDisplay: "exceptZero" }}          className="h-48"        />      ))}    </div>  );}

Custom layout

Without a visible label, pass aria-label to Slider.

slider-custom-demo.tsx

"use client";import { SpeakerHighIcon, SpeakerLowIcon } from "@phosphor-icons/react";import {  Slider,  SliderHandle,  SliderRail,  SliderRange,  SliderTrack,} from "@/components/vip-ui/slider";export function SliderCustomDemo() {  return (    <Slider      aria-label="Media volume"      defaultValue={60}      className="w-full max-w-sm"    >      <div className="flex items-center gap-2 text-muted-foreground">        <SpeakerLowIcon aria-hidden="true" className="size-5 shrink-0" />        <SliderTrack className="flex-1">          <SliderRail>            <SliderRange />          </SliderRail>          <SliderHandle />        </SliderTrack>        <SpeakerHighIcon aria-hidden="true" className="size-5 shrink-0" />      </div>    </Slider>  );}

Disabled

Boost spend20

slider-disabled-demo.tsx

"use client";import { Slider } from "@/components/vip-ui/slider";export function SliderDisabledDemo() {  return (    <Slider      label="Boost spend"      defaultValue={20}      minValue={0}      maxValue={100}      isDisabled      className="w-full max-w-sm"    />  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Slider (opens in a new tab).

Slider

label: string: Label above the track, next to the value.
thumbLabels: string[]: Names each handle, in value order. Give one when defaultValue or value is an array.
marks: number[]: Values to label along the track. For custom labels, compose SliderMarks.
fillOffset: number: The value the fill starts from. Set 0 for a range that goes below zero.
orientation: "horizontal" | "vertical" = "horizontal": A vertical slider is 14rem tall. Set the height with className.

SliderMarks

values: number[]Required: The values to label. Labels in the selected range use the foreground color.
children: (value: number) => ReactNode: Renders each label. Without it, the slider formatOptions format the value.
offset: number: The offset of the SliderRange fill, so labels in the filled part use the foreground color.