From feddf62c85ff52b8078677b164e94577f3f29f50 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Mon, 1 Jan 2024 15:50:42 +0100
Subject: [PATCH] feat: slider styles

---
 src/components/ui/slider/slider.module.scss | 37 +++++++++++++++++++--
 src/components/ui/slider/slider.stories.tsx | 17 ++++++++++
 src/components/ui/slider/slider.tsx         |  8 ++---
 3 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ui/slider/slider.stories.tsx

diff --git a/src/components/ui/slider/slider.module.scss b/src/components/ui/slider/slider.module.scss
index e00a847..dd41934 100644
--- a/src/components/ui/slider/slider.module.scss
+++ b/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: var(--color-accent-500);
+  background-color: rgb(140 97 255 / 50%);
   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;
+  }
 }
diff --git a/src/components/ui/slider/slider.stories.tsx b/src/components/ui/slider/slider.stories.tsx
new file mode 100644
index 0000000..4105675
--- /dev/null
+++ b/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] },
+}
diff --git a/src/components/ui/slider/slider.tsx b/src/components/ui/slider/slider.tsx
index 0997068..520bec1 100644
--- a/src/components/ui/slider/slider.tsx
+++ b/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>
   )
 })