MicroClub Slider

1import * as React from 'react';
2import { Slider as SliderPrimitive } from '@base-ui/react/slider';
3 
4import { cn } from '@/lib/utils';
5 
6function McSlider({
7  className,
8  defaultValue,
9  value,
10  min = 0,
11  max = 100,
12  showValue = true,
13  border = false,
14  unity,
15  onValueChange,
16  ...props
17}: SliderPrimitive.Root.Props & {
18  showValue?: boolean;
19  border?: boolean;
20  unity?: string;
21}) {
22  const isControlled = value !== undefined;
23 
24  const [internalValues, setInternalValues] = React.useState<number[]>(
25    Array.isArray(defaultValue) ? defaultValue : [min]
26  );
27 
28  const values = isControlled ? (Array.isArray(value) ? value : [value]) : internalValues;
29 
30  return (
31    <SliderPrimitive.Root
32      className={cn('data-horizontal:w-full data-vertical:h-full mt-12', className)}
33      data-slot="slider"
34      defaultValue={defaultValue}
35      value={value}
36      min={min}
37      max={max}
38      thumbAlignment="edge-client-only"
39      onValueChange={(newValues, event) => {
40        if (!isControlled) {
41          setInternalValues(Array.isArray(newValues) ? newValues : [newValues]);
42        }
43        onValueChange?.(newValues, event);
44      }}
45      {...props}
46    >
47      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
48        <SliderPrimitive.Track
49          data-slot="slider-track"
50          className="relative grow overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-ring select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
51        >
52          <SliderPrimitive.Indicator
53            data-slot="slider-range"
54            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
55          />
56        </SliderPrimitive.Track>
57 
58        {values.map((currentValue, index) => (
59          <SliderPrimitive.Thumb
60            key={index}
61            data-slot="slider-thumb"
62            className="group relative block size-3 shrink-0 rounded-full border-2 border-primary bg-muted ring-accent-foreground backdrop-blur-3xl transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 active:bg-primary disabled:pointer-events-none disabled:opacity-50 disabled:bg-blue-500"
63          >
64            {showValue && (
65              <div
66                className={cn(
67// … truncated