infoalloggi-monorepo/apps/infoalloggi/src/components/ui/slider.tsx

import { Slider as SliderPrimitive } from "radix-ui";
import * as React from "react";

import { cn } from "~/lib/utils";

interface SliderProps
	extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
	rangeClassName?: string;
	thumbClassName?: string;
}
function Slider({
	className,
	thumbClassName,
	rangeClassName,
	defaultValue,
	value,
	min = 0,
	max = 100,
	...props
}: React.ComponentProps<typeof SliderPrimitive.Root> & SliderProps) {
	const _values = React.useMemo(() => {
		if (Array.isArray(value)) return value;
		if (Array.isArray(defaultValue)) return defaultValue;
		return [min, max];
	}, [value, defaultValue, min, max]);

	return (
		<SliderPrimitive.Root
			className={cn(
				"relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-disabled:opacity-50",
				className,
			)}
			data-slot="slider"
			defaultValue={defaultValue}
			max={max}
			min={min}
			value={value}
			{...props}
		>
			<SliderPrimitive.Track
				className={cn(
					"relative grow cursor-pointer overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
				)}
				data-slot="slider-track"
			>
				<SliderPrimitive.Range
					className={cn(
						"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
						rangeClassName,
					)}
					data-slot="slider-range"
				/>
			</SliderPrimitive.Track>
			{Array.from({ length: _values.length }, (_, index) => (
				<SliderPrimitive.Thumb
					className={cn(
						"block size-4 shrink-0 cursor-pointer rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50",
						thumbClassName,
					)}
					data-slot="slider-thumb"
					// biome-ignore lint/suspicious/noArrayIndexKey: <index is safe here>
					key={index}
				/>
			))}
		</SliderPrimitive.Root>
	);
}

export { Slider };