import { ProgressSlider } from "@/components/ui/progress-slider"

export function ProgressSliderDemo() {
  return (
    <div className="grid gap-6">
      <ProgressSlider
        aria-label="Investment amount"
        defaultValue={28}
        showTicks
        size="lg"
        tone="brand"
      />

      <ProgressSlider
        aria-label="Savings progress"
        defaultValue={62}
        showTicks
        tone="success"
      />

      <ProgressSlider
        aria-label="Disabled progress"
        defaultValue={44}
        disabled
        tone="neutral"
      />
    </div>
  )
}
