Slider

1'use client';
2 
3import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
4import { type ComponentProps, useMemo } from 'react';
5import { cn } from '@/lib/classnames';
6 
7function Slider({
8  className,
9  defaultValue,
10  value,
11  min = 0,
12  max = 100,
13  ...props
14}: ComponentProps<typeof Root>) {
15  const _values = useMemo(() => {
16    if (Array.isArray(value)) {
17      return value;
18    }
19 
20    return Array.isArray(defaultValue) ? defaultValue : [min, max];
21  }, [value, defaultValue, min, max]);
22 
23  return (
24    <Root
25      className={cn(
26        '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',
27        className,
28      )}
29      data-slot='slider'
30      defaultValue={defaultValue}
31      max={max}
32      min={min}
33      value={value}
34      {...props}
35    >
36      <Track
37        className={cn(
38          'relative grow 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',
39        )}
40        data-slot='slider-track'
41      >
42        <Range
43          className={cn(
44            'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
45          )}
46          data-slot='slider-range'
47        />
48      </Track>
49      {Array.from({ length: _values.length }, (_, index) => (
50        <Thumb
51          className='block size-4 shrink-0 rounded-full border border-primary bg-white 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'
52          data-slot='slider-thumb'
53          // biome-ignore lint/suspicious/noArrayIndexKey: okay-ish
54          key={index}
55        />
56      ))}
57    </Root>
58  );
59}
60 
61export { Slider };