feat: add slider component

packages/ui/package.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
+    "@radix-ui/react-slider": "1.2.1",
     "@radix-ui/react-switch": "1.1.0",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",

packages/ui/src/components/slider/slider.web.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from 'leather-styles/jsx';
+
+import { Slider as Component } from './slider.web';
+
+const meta: Meta<typeof Component.Root> = {
+  component: Component.Root,
+  tags: ['autodocs'],
+  title: 'Slider',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Component.Root>;
+
+export const Default: Story = {
+  render: () => (
+    <Box width="300px">
+      <Component.Root defaultValue={[50]} max={100} step={1}>
+        <Component.Track>
+          <Component.Range />
+        </Component.Track>
+        <Component.Thumb />
+      </Component.Root>
+    </Box>
+  ),
+};
+
+export const RangeSlider: Story = {
+  render: () => (
+    <Box width="300px">
+      <Component.Root defaultValue={[20, 80]} max={100} step={1}>
+        <Component.Track>
+          <Component.Range />
+        </Component.Track>
+        <Component.Thumb />
+        <Component.Thumb />
+      </Component.Root>
+    </Box>
+  ),
+};
+
+export const SteppedSlider: Story = {
+  render: () => (
+    <Box width="300px">
+      <Component.Root defaultValue={[50]} max={100} step={10}>
+        <Component.Track>
+          <Component.Range />
+        </Component.Track>
+        <Component.Thumb />
+      </Component.Root>
+    </Box>
+  ),
+};
+
+export const CustomWidth: Story = {
+  render: () => (
+    <Box width="500px">
+      <Component.Root defaultValue={[50]} max={100} step={1}>
+        <Component.Track>
+          <Component.Range />
+        </Component.Track>
+        <Component.Thumb />
+      </Component.Root>
+    </Box>
+  ),
+};

packages/ui/src/components/slider/slider.web.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+
+import * as RadixSlider from '@radix-ui/react-slider';
+import { css } from 'leather-styles/css';
+
+const sliderRootStyles = css({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  touchAction: 'none',
+  width: '100%',
+});
+
+const sliderTrackStyles = css({
+  backgroundColor: 'ink.component-background-default',
+  position: 'relative',
+  flexGrow: 1,
+  height: '4px',
+  borderRadius: '0 9999px 9999px 0',
+});
+
+const sliderRangeStyles = css({
+  position: 'absolute',
+  backgroundColor: 'ink.text-primary',
+  height: '100%',
+});
+
+const sliderThumbStyles = css({
+  display: 'block',
+  width: '24px',
+  height: '24px',
+  backgroundColor: 'ink.background-primary',
+  borderRadius: '14px',
+  boxShadow: 'lg',
+  cursor: 'pointer',
+  transition: 'transform 0.2s',
+  border: '1px solid',
+  borderColor: 'ink.border-primary',
+
+  '&:hover': {
+    transform: 'scale(1.1)',
+  },
+  '&:focus': {
+    outline: 'none',
+    boxShadow: 'focus',
+  },
+});
+
+const Root = forwardRef<HTMLDivElement, RadixSlider.SliderProps>((props, ref) => (
+  <RadixSlider.Root className={sliderRootStyles} ref={ref} {...props} />
+));
+
+const Track = forwardRef<HTMLDivElement, RadixSlider.SliderTrackProps>((props, ref) => (
+  <RadixSlider.Track className={sliderTrackStyles} ref={ref} {...props} />
+));
+
+const Range = forwardRef<HTMLDivElement, RadixSlider.SliderRangeProps>((props, ref) => (
+  <RadixSlider.Range className={sliderRangeStyles} ref={ref} {...props} />
+));
+
+const Thumb = forwardRef<HTMLDivElement, RadixSlider.SliderThumbProps>((props, ref) => (
+  <RadixSlider.Thumb className={sliderThumbStyles} ref={ref} {...props} />
+));
+
+export const Slider = {
+  Root,
+  Track,
+  Range,
+  Thumb,
+};