"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; export interface BjorkSliderProps extends Omit< React.InputHTMLAttributes, "defaultValue" | "max" | "min" | "onChange" | "step" | "type" | "value" > { value?: number; defaultValue?: number; min?: number; max?: number; step?: number; displayValue?: React.ReactNode; onChange?: React.ChangeEventHandler; onValueChange?: (value: number) => void; trackClassName?: string; valueClassName?: string; } function getProgress(value: number, min: number, max: number) { if (max === min) return 0; return Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100); } export function BjorkSlider({ className, defaultValue, disabled, displayValue, max = 100, min = 0, onChange, onValueChange, step = 1, trackClassName, value, valueClassName, ...props }: BjorkSliderProps) { const [localValue, setLocalValue] = React.useState(defaultValue ?? min); const currentValue = value ?? localValue; const progress = getProgress(currentValue, min, max); const handleChange = React.useCallback( (event: React.ChangeEvent) => { const nextValue = Number(event.target.value); if (value === undefined) { setLocalValue(nextValue); } onValueChange?.(nextValue); onChange?.(event); }, [onChange, onValueChange, value], ); const slider = ( ); if (displayValue === undefined || displayValue === null) { return {slider}; } return ( {slider} {displayValue} ); }