Slider

1"use client";
2 
3import { Slider as SliderPrimitive } from "radix-ui";
4import * as React from "react";
5 
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8 
9/* Role: bordered adaptive glass. */
10const ROLE = {
11  border: true,
12};
13 
14const Slider = React.forwardRef<
15  React.ElementRef<typeof SliderPrimitive.Root>,
16  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> &
17    MaterialAxisProps & {
18      variant?: "default" | "glass";
19    }
20>(({ className, variant = "glass", defaultValue, value, min = 0, max = 100, ...props }, ref) => {
21  const [axes, rest] = splitAxisProps(props);
22  // The THUMB is the glass surface element: a small glass knob, or a plain neutral dot when m === null.
23  const m = materialSurface(variant === "default" ? null : ROLE, axes);
24 
25  const _values = React.useMemo(
26    () =>
27      Array.isArray(value)
28        ? value
29        : Array.isArray(defaultValue)
30          ? defaultValue
31          : [
32              min,
33              max,
34            ],
35    [
36      value,
37      defaultValue,
38      min,
39      max,
40    ],
41  );
42 
43  return (
44    <SliderPrimitive.Root
45      ref={ref}
46      data-slot="slider"
47      defaultValue={defaultValue}
48      value={value}
49      min={min}
50      max={max}
51      className={cn(
52        "relative flex w-full touch-none select-none items-center 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",
53        className,
54      )}
55      {...rest}
56    >
57      <SliderPrimitive.Track
58        data-slot="slider-track"
59        className="relative grow overflow-hidden rounded-full bg-foreground/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
60      >
61        <SliderPrimitive.Range
62          data-slot="slider-range"
63          className="absolute bg-[var(--glass-accent)] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
64        />
65      </SliderPrimitive.Track>
66      {Array.from(
67        {
68          length: _values.length,
69        },
70        (_, index) => (
71          <SliderPrimitive.Thumb
72            data-slot="slider-thumb"
73            key={index}
74            data-material={m?.["data-material"]}
75            className={cn(
76              m?.className,
77// … truncated