Add frontend

frontend/src/components/ui/label.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function Label({ children, className }) {
+  return (
+    <label className={`text-sm font-medium text-slate-700 ${className || ''}`}>
+      {children}
+    </label>
+  );
+}

frontend/src/components/ui/slider.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../../lib/utils';
+
+export function Slider({ className, ...props }) {
+  return (
+    <SliderPrimitive.Root
+      className={cn(
+        'relative flex w-full touch-none select-none items-center',
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-200">
+        <SliderPrimitive.Range className="absolute h-full bg-slate-900" />
+      </SliderPrimitive.Track>
+      {props.value?.map((_, i) => (
+        <SliderPrimitive.Thumb
+          key={i}
+          className="block h-5 w-5 rounded-full border-2 border-slate-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}