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

export function SliderDemo() {
  return (
    <div className="grid gap-8">
      <Slider
        aria-label="Budget amount"
        defaultValue={[40]}
        indicator="upper-tooltip"
      />

      <Slider
        aria-label="Savings range"
        ariaLabels={["Minimum savings", "Maximum savings"]}
        defaultValue={[25, 75]}
        indicator="lower-text"
        minStepsBetweenThumbs={4}
      />

      <div className="flex h-44 items-center">
        <Slider
          aria-label="Risk tolerance"
          className="h-40"
          defaultValue={[60]}
          orientation="vertical"
          tone="warning"
        />
      </div>
    </div>
  )
}
