Slider

An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.

cossbycoss

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

export default function Particle() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
      <div className="w-full max-w-sm">
        <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>
    </div>
  );
}