setting up test functionality

components/daily-quiz/wellness-slider.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+
+type WellnessSliderProps = {
+  id: string;
+  label: string;
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  onChange: (value: number) => void;
+};
+
+export function WellnessSlider({
+  id,
+  label,
+  value,
+  min = 1,
+  max = 5,
+  step = 1,
+  unit,
+  formatValue,
+  disabled = false,
+  onChange,
+}: WellnessSliderProps) {
+  const displayValue = formatValue ? formatValue(value) : `${value}${unit ?? ""}`;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-sm">
+        <Label htmlFor={id}>{label}</Label>
+        <span className="text-muted-foreground">{displayValue}</span>
+      </div>
+      <input
+        id={id}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onChange(Number(event.target.value))}
+        className="w-full accent-primary disabled:opacity-60"
+      />
+    </div>
+  );
+}