feat(UI): add Slider component

package.json

@@ -26,6 +26,7 @@
 		"@emotion/styled": "^11.11.5",
 		"@fontsource-variable/manrope": "^5.0.20",
 		"@mui/material": "^5.15.15",
+		"@radix-ui/react-slider": "^1.1.2",
 		"@radix-ui/react-switch": "^1.0.3",
 		"@tanstack/react-query": "5.29.2",
 		"class-variance-authority": "^0.7.0",

src/components/ui/Slider.tsx

@@ -0,0 +1,38 @@
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
+import cn from 'utils/cn'
+import SliderThumbIcon from '../../icons/SliderThumb.svg?react'
+
+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 h-10 w-full items-center',
+			'touch-none select-none',
+			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			className
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className='relative h-2 w-full grow cursor-pointer overflow-hidden rounded-full bg-light-grayish-blue'>
+			<SliderPrimitive.Range className='absolute h-full bg-light-cyan' />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb
+			className={cn(
+				'flex h-10 w-10 cursor-pointer items-center justify-center',
+				'rounded-full bg-strong-cyan shadow-slider-thumb transition-colors',
+				'hover:bg-soft-cyan',
+				'focus-visible:outline-none',
+				'active:cursor-grabbing active:bg-very-strong-cyan'
+			)}
+		>
+			<SliderThumbIcon />
+		</SliderPrimitive.Thumb>
+	</SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

tailwind.config.js

@@ -40,7 +40,8 @@ const config = {
 				background: 'url("/img/background.svg")'
 			},
 			boxShadow: {
-				card: '0 20px 30px -5px rgba(127, 137, 185, 0.15)'
+				card: '0 20px 30px -5px rgba(127, 137, 185, 0.15)',
+				'slider-thumb': '0 15px 30px hsla(174, 86%, 50%, 0.6)'
 			},
 			keyframes: {
 				'accordion-down': {