Slider

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
    <Slider defaultValue={[40]} className="max-w-100" />
  )
}

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
    <Slider defaultValue={[40]} disabled className="max-w-100" />
  )
}

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
    <Slider defaultValue={[40]} step={20} className="max-w-100" />
  )
}

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
   <div className="space-y-6">
      <Slider defaultValue={[40]} colors="primary" className="max-w-100" />
      <Slider defaultValue={[40]} colors="secondary" className="max-w-100" />
      <Slider defaultValue={[40]} colors="warning" className="max-w-100" />
      <Slider defaultValue={[40]} colors="danger" className="max-w-100" />
      <Slider defaultValue={[40]} colors="neutral" className="max-w-100" />
    </div>
  )
}

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
    <div className="space-y-6">
      <Slider defaultValue={[40]} size="sm" className="max-w-100" />
      <Slider defaultValue={[40]} size="md" className="max-w-100" />
      <Slider defaultValue={[40]} size="lg" className="max-w-100" />
    </div>
  )
}

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
    <Slider defaultValue={[40]} orientation="vertical" className="h-60" />
  )
}

import Slider from '@/components/ui/Slider';

export default function Page() {
  return (
    <Slider defaultValue={[40, 80]} className="max-w-100" />
  )
}