GitHub

Slider

PreviousNext

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

Loading
Loading...
import { Slider } from "@/components/ui/slider";
 
export function SliderDemo() {
  return (
    <Slider
      className="mx-auto w-full max-w-xs"
      defaultValue={[75]}
      max={100}
      step={1}
    />
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/slider"

Usage

import { Slider } from "@/components/ui/slider";
<Slider defaultValue={[33]} max={100} step={1} />