Feature/Slider (#13)

* feat: add slider component

* feat: add args in slider storybook

lib/components/Slider/index.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Slider } from '@/components/Slider'
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultValue: {
+      control: { array: { type: 'number' } },
+      description: 'The initial value(s) of the slider',
+      defaultValue: [50], // Default to 50 for the preview
+    },
+    max: {
+      control: 'number',
+      description: 'The maximum value for the slider',
+      defaultValue: 100, // Default maximum value
+    },
+    step: {
+      control: 'number',
+      description: 'The step size for the slider',
+      defaultValue: 1, // Default step size
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the slider',
+      defaultValue: false, // Slider enabled by default
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+// Default Slider Story with args controls
+export const Default: Story = {
+  args: {
+    defaultValue: [50], // Default starting value
+    max: 100, // Maximum value of the slider
+    step: 1, // Step size
+    disabled: false, // Slider is enabled by default
+  },
+  render: (args: SliderProps) => (
+    <div className='flex w-[625px] items-center justify-center p-10'>
+      <Slider {...args} className='w-3/5' />
+    </div>
+  ),
+}
+
+// Custom Range Slider Story
+export const CustomRange: Story = {
+  args: {
+    defaultValue: [30],
+    max: 200,
+    step: 10,
+    disabled: false,
+  },
+  render: (args: SliderProps) => (
+    <div className='flex w-[625px] items-center justify-center p-10'>
+      <Slider {...args} className='w-3/5' />
+    </div>
+  ),
+}
+
+// Disabled Slider Story
+export const Disabled: Story = {
+  args: {
+    defaultValue: [70],
+    max: 100,
+    step: 1,
+    disabled: true,
+  },
+  render: (args: SliderProps) => (
+    <div className='flex w-[625px] items-center justify-center p-10'>
+      <Slider {...args} className='w-3/5' />
+    </div>
+  ),
+}

lib/components/Slider/index.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className='relative h-2 w-full grow overflow-hidden rounded-full bg-neutral-100'>
+      <SliderPrimitive.Range className='absolute h-full bg-neutral-700' />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className='block size-5 rounded-full border-2 border-neutral-900 bg-white ring-offset-current transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50' />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package.json

@@ -45,6 +45,7 @@
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",