feat: updates

packages/web/components/Slider.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Slider from './Slider'
+import { useArgs } from '@storybook/client-api'
+import { cx } from '@emotion/css'
+
+export default {
+  title: 'Basic/Slider',
+  component: Slider,
+  args: {
+    value: 50,
+    min: 0,
+    max: 100,
+    onlyCallOnChangeAfterDragEnded: false,
+    orientation: 'horizontal',
+    alwaysShowTrack: false,
+    alwaysShowThumb: false,
+  },
+} as ComponentMeta<typeof Slider>
+
+const Template: ComponentStory<typeof Slider> = args => {
+  const [, updateArgs] = useArgs()
+
+  return (
+    <div
+      className={cx(
+        'h-full rounded-24 bg-[#F8F8F8] dark:bg-black',
+        args.orientation === 'horizontal' && 'py-4 px-5',
+        args.orientation === 'vertical' && 'h-64 w-min py-5 px-4'
+      )}
+    >
+      <Slider {...args} onChange={value => updateArgs({ value })} />
+    </div>
+  )
+}
+
+export const Default = Template.bind({})
+
+export const Vertical = Template.bind({})
+Vertical.args = {
+  orientation: 'vertical',
+  alwaysShowTrack: true,
+  alwaysShowThumb: true,
+}