slider

1import * as React from "react"
2import { Slider as BaseSlider } from "@base-ui/react/slider"
3 
4import { cn } from "@/lib/utils"
5 
6function Slider({
7	className,
8	children,
9	defaultValue,
10	value,
11	min = 0,
12	max = 100,
13	...props
14}: React.ComponentProps<typeof BaseSlider.Root>) {
15	const _values = React.useMemo(
16		() =>
17			Array.isArray(value)
18				? value
19				: Array.isArray(defaultValue)
20					? defaultValue
21					: [min, max],
22		[value, defaultValue, min, max]
23	)
24 
25	return (
26		<BaseSlider.Root
27			data-slot="slider"
28			defaultValue={defaultValue}
29			value={value}
30			min={min}
31			max={max}
32			className={cn(
33				"relative w-full touch-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
34				className
35			)}
36			{...props}
37		>
38			<BaseSlider.Control
39				data-slot="slider-control"
40				className="flex w-full items-center"
41			>
42				<BaseSlider.Track
43					data-slot="slider-track"
44					className="bg-muted relative grow rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
45				>
46					<BaseSlider.Indicator
47						data-slot="slider-indicator"
48						className="bg-primary absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
49					/>
50					{Array.from({ length: _values.length }, (_, index) => (
51						<BaseSlider.Thumb
52							data-slot="slider-thumb"
53							key={index}
54							className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden"
55						/>
56					))}
57				</BaseSlider.Track>
58			</BaseSlider.Control>
59			{children}
60		</BaseSlider.Root>
61	)
62}
63 
64function SliderValue({
65	className,
66	...props
67}: React.ComponentProps<typeof BaseSlider.Value>) {
68	return (
69		<BaseSlider.Value
70			data-slot="slider-value"
71			className={cn(
72				"text-foreground mt-2 flex justify-end text-sm font-medium",
73				className
74			)}
75			{...props}
76		/>
77	)
78}
79 
80export { Slider, SliderValue }