feat: slider styles

src/components/ui/slider/slider.module.scss

@@ -7,6 +7,19 @@
   width: 100%;
 }
 
+.valueDisplay {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 44px;
+  height: 36px;
+
+  border: 1px solid var(--color-dark-300);
+  border-radius: 2px;
+}
+
 .root {
   touch-action: none;
   user-select: none;
@@ -25,14 +38,14 @@
   width: 100%;
   height: 4px;
 
-  opacity: 0.5;
+  background-color: rgb(140 97 255 / 50%);
-  background-color: var(--color-accent-500);
   border-radius: 2px;
 }
 
 .range {
   position: absolute;
   height: 100%;
+  opacity: 1;
   background-color: var(--color-accent-500);
 }
 
@@ -40,13 +53,31 @@
   touch-action: pan-x;
   cursor: pointer;
 
+  position: relative;
+
   display: block;
 
   width: 16px;
   height: 16px;
 
-  background-color: var(--color-light-100);
+  background-color: var(--color-accent-500);
   border-radius: 9999px;
+  outline: none;
 
   transition: transform 0.2s ease-in-out;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 8px;
+    height: 8px;
+
+    background-color: var(--color-light-100);
+    border-radius: 9999px;
+  }
 }

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Slider } from './'
+
+const meta = {
+  component: Slider,
+  parameters: {},
+  tags: ['autodocs'],
+  title: 'Components/Slider',
+} satisfies Meta<typeof Slider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { value: [0, 100] },
+}

src/components/ui/slider/slider.tsx

@@ -7,7 +7,7 @@ import s from './slider.module.scss'
 const Slider = forwardRef<
   ElementRef<typeof SliderPrimitive.Root>,
   Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value'> & {
-    value?: (null | number)[]
+    value: (null | number)[]
   }
 >(({ className, max, onValueChange, value, ...props }, ref) => {
   useEffect(() => {
@@ -18,7 +18,7 @@ const Slider = forwardRef<
 
   return (
     <div className={s.container}>
-      <span>{value?.[0]}</span>
+      <span className={s.valueDisplay}>{value?.[0]}</span>
       <SliderPrimitive.Root
         className={clsx(s.root, className)}
         max={max}
@@ -28,12 +28,12 @@ const Slider = forwardRef<
         value={[value?.[0] ?? 0, value?.[1] ?? max ?? 0]}
       >
         <SliderPrimitive.Track className={s.track}>
-          <SliderPrimitive.Range className={'absolute h-full bg-primary'} />
+          <SliderPrimitive.Range className={s.range} />
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb className={s.thumb} />
         <SliderPrimitive.Thumb className={s.thumb} />
       </SliderPrimitive.Root>
-      <span>{value?.[1]}</span>
+      <span className={s.valueDisplay}>{value?.[1]}</span>
     </div>
   )
 })