Slider

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

export default function Example() {
  const [value, setValue] = useState(50)
  const [range, setRange] = useState<[number, number]>([20, 80])

  return (
    <>
      {/* Basic slider */}
      <Slider
        value={value}
        onChange={setValue}
        label="Volume"
        showValue
      />

      {/* Range slider */}
      <Slider
        variant="range"
        rangeValue={range}
        onRangeChange={setRange}
        min={0}
        max={1000}
        step={10}
      />

      {/* With custom range and step */}
      <Slider
        label="Temperature"
        min={-20}
        max={50}
        step={5}
        showMinMax
      />

      {/* With labels */}
      <Slider
        label="Brightness"
        defaultValue={75}
        showValue
        showMinMax
      />
    </>
  )
}