Slider

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

Installation


pnpm dlx shadcn@latest add @coss/slider

Usage

import { Slider, SliderValue } from "@/components/ui/slider"

<Slider />

API Reference

Slider

Root component. Styled wrapper for Slider.Root from Base UI with default min/max values and edge-aligned thumbs.

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum value of the slider
`max`	`number`	`100`	Maximum value of the slider

Note: The component sets thumbAlignment="edge" by default, which aligns thumbs to the edge of the track rather than centering them.

SliderValue

Displays the current value. Styled wrapper for Slider.Value from Base UI.

Examples

For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Slider field.

With Label and Value

Opacity50

import { Field, FieldLabel } from "@/components/ui/field";
import { Slider, SliderValue } from "@/components/ui/slider";

export default function Particle() {
  return (
    <Field>
      <Slider defaultValue={50}>
        <div className="mb-2 flex items-center justify-between gap-1">
          <FieldLabel className="font-medium text-sm">Opacity</FieldLabel>
          <SliderValue />
        </div>
      </Slider>
    </Field>
  );
}

Range Slider

Vertical

5 GB20 GB35 GB

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

export default function Particle() {
  return (
    <div>
      <Slider
        aria-label="Storage size in GB"
        defaultValue={15}
        max={35}
        min={5}
      />
      <div
        aria-label="Storage size reference values"
        className="mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs"
        role="group"
      >
        <span>5 GB</span>
        <span>20 GB</span>
        <span>35 GB</span>
      </div>
    </div>
  );
}

Form Integration

0123456789101112

import { cn } from "@/lib/utils";
import { Slider } from "@/components/ui/slider";

const max = 12;
const skipInterval = 2;
const ticks = [...Array(max + 1)].map((_, i) => i);

export default function Particle() {
  return (
    <div>
      <Slider aria-label="Value selector" defaultValue={5} max={max} />
      <div
        aria-label="Value scale from 0 to 12"
        className="mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs"
        role="group"
      >
        {ticks.map((_, i) => (
          <span
            className="flex w-0 flex-col items-center justify-center gap-2"
            key={String(i)}
          >
            <span
              className={cn(
                "h-1 w-px bg-muted-foreground/70",
                i % skipInterval !== 0 && "h-0.5",
              )}
            />
            <span className={cn(i % skipInterval !== 0 && "opacity-0")}>
              {i}
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}

On This Page

Installation Usage API Reference Slider SliderValue Examples With Label and Value Range Slider Vertical Form Integration