Slider

An adjustable instrument with keyboard, touch and multi-thumb support.

$ npx @beaket/ui add slider

Source

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

export default function DefaultExample() {
  return <Slider defaultValue={[40]} thumbLabels={["Volume"]} />;
}

Examples

All States

Volume

Price range

Unavailable

Source

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

export default function AllStatesExample() {
  return (
    <div className="w-full space-y-4">
      <p>Volume</p>
      <Slider defaultValue={[40]} thumbLabels={["Volume"]} />
      <p>Price range</p>
      <Slider defaultValue={[20, 80]} thumbLabels={["Minimum price", "Maximum price"]} />
      <p>Unavailable</p>
      <Slider defaultValue={[60]} disabled thumbLabels={["Unavailable volume"]} />
    </div>
  );
}

Props

Name	Type	Default	Description
thumbLabels	string[] \| undefined	—	Accessible names for automatic thumbs; use Slider.Thumb to compose your own.