42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
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 }
|