huhuih

hzgjuigik

client/src/components/ui/slider.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  value?: number
+  onValueChange?: (value: number) => void
+}
+
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, value, onValueChange, min = 0, max = 365, step = 1, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = parseInt(e.target.value)
+      onValueChange?.(newValue)
+    }
+
+    return (
+      <input
+        type="range"
+        ref={ref}
+        className={cn(
+          "w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer",
+          "accent-primary-500 dark:accent-primary-600",
+          "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary-500 [&::-webkit-slider-thumb]:cursor-pointer",
+          "dark:[&::-webkit-slider-thumb]:bg-primary-600",
+          "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary-500 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer",
+          "dark:[&::-moz-range-thumb]:bg-primary-600",
+          className
+        )}
+        value={value}
+        onChange={handleChange}
+        min={min}
+        max={max}
+        step={step}
+        {...props}
+      />
+    )
+  }
+)
+Slider.displayName = "Slider"
+
+export { Slider }