25:I[48815,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"default"] 26:I[55975,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"Toc"] 27:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"Tabs"] 28:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"TabsList"] 29:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"TabsTrigger"] 2a:I[38270,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"TabsContent"] 2c:I[69317,["864","static/chunks/864-6d01e3c41eb3f650.js","115","static/chunks/115-bf7731c9ff9197d6.js","687","static/chunks/687-4226cb1aba227416.js","184","static/chunks/184-9d4b289ffe805b22.js","986","static/chunks/986-0e032d89a5db8be6.js","640","static/chunks/640-3907a99e1c399862.js","29","static/chunks/29-17f565cfd053cb6c.js","35","static/chunks/35-bfdb98bf63bc27cb.js","715","static/chunks/715-e9a26000e44c5756.js","479","static/chunks/479-58ef91888afc5714.js","284","static/chunks/284-7ff65619d81bad9e.js","36","static/chunks/app/c/%5Bname%5D/page-947b3d0680d48e6c.js"],"CopyButton"] 22:["$","$L25",null,{"ref":"$undefined","iconNode":[["path",{"d":"m15 18-6-6 6-6","key":"1wnfg3"}]],"className":"lucide-chevron-left size-3.5"}] 23:["$","$L10",null,{"className":"flex items-center gap-2 font-mono text-muted-foreground text-xs outline-none transition-colors hover:text-phosphor focus-visible:text-phosphor","href":"/c/spinner","children":["Spinner",["$","$L25",null,{"ref":"$undefined","iconNode":[["path",{"d":"m9 18 6-6-6-6","key":"mthhwq"}]],"className":"lucide-chevron-right size-3.5"}]]}] 24:["$","div",null,{"className":"hidden w-52 shrink-0 xl:block","children":["$","$L26",null,{"className":"sticky top-14 max-h-[calc(100svh-3.5rem)] overflow-y-auto py-10","entries":[{"id":"installation","label":"Installation"},{"id":"notes","label":"Notes"}]}]}] 2d:T3ed2,

"use client";

import { Slider as SliderPrimitive } from "@base-ui/react/slider";

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

// Base UI accepts either a number or an array for a single-thumb value.
function thumbCount(
  value: SliderPrimitive.Root.Props["value"],
  defaultValue: SliderPrimitive.Root.Props["defaultValue"]
): number {
  if (Array.isArray(value)) {
    return value.length;
  }
  if (Array.isArray(defaultValue)) {
    return defaultValue.length;
  }
  if (typeof value === "number" || typeof defaultValue === "number") {
    return 1;
  }
  return 2;
}

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: SliderPrimitive.Root.Props) {
  const thumbs = thumbCount(value, defaultValue);

  return (
    <SliderPrimitive.Root
      className={cn(
        "group/slider data-disabled:opacity-40 data-[orientation=horizontal]:h-8 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-8",
        className
      )}
      data-slot="slider"
      defaultValue={defaultValue}
      max={max}
      min={min}
      thumbAlignment="edge"
      value={value}
      {...props}
    >
      <SliderPrimitive.Control className="relative flex touch-none select-none items-center data-[orientation=horizontal]:h-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-full data-[orientation=vertical]:flex-col">
        <SliderPrimitive.Track
          className="relative grow overflow-hidden rounded-none bg-phosphor/10 transition-[background-color,box-shadow] group-hover/slider:bg-phosphor/20 group-focus-within/slider:bg-phosphor/20 group-focus-within/slider:shadow-glow-slider-track data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
          data-slot="slider-track"
        >
          <SliderPrimitive.Indicator
            className="absolute bg-phosphor shadow-glow-slider-track data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
            data-slot="slider-range"
          />
        </SliderPrimitive.Track>
        {Array.from({ length: thumbs }, (_, index) => (
          <SliderPrimitive.Thumb
            className="block shrink-0 rounded-none border border-phosphor bg-void shadow-glow-slider outline-none transition-[background-color,border-color,box-shadow] before:absolute before:content-[''] group-hover/slider:border-phosphor-bright group-hover/slider:bg-panel-raised group-hover/slider:shadow-glow-slider-hover has-[:focus-visible]:border-phosphor-bright has-[:focus-visible]:bg-panel-raised has-[:focus-visible]:shadow-glow-slider-hover has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-solid has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-phosphor-bright data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-2 data-[orientation=horizontal]:before:-inset-x-3 data-[orientation=horizontal]:before:-inset-y-2 data-[orientation=vertical]:h-2 data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:-inset-x-2 data-[orientation=vertical]:before:-inset-y-3"
            data-slot="slider-thumb"
            // biome-ignore lint/suspicious/noArrayIndexKey: the thumb index is its position.
            key={index}
          />
        ))}
      </SliderPrimitive.Control>
    </SliderPrimitive.Root>
  );
}

export { Slider };

20:["$","$L27",null,{"defaultValue":"command","children":[["$","$L28",null,{"children":[["$","$L29",null,{"value":"command","children":"Command"}],["$","$L29",null,{"value":"manual","children":"Source"}]]}],["$","$L2a",null,{"className":"animate-none","value":"command","children":"$L2b"}],["$","$L2a",null,{"className":"animate-none pt-2","value":"manual","children":["$","ol",null,{"className":"relative grid grid-cols-[minmax(0,1fr)] gap-7 pl-7","data-slot":"steps","children":[["$","span",null,{"aria-hidden":"true","className":"absolute top-0 bottom-0 w-px bg-line left-[0.6875rem]"}],[["$","li",null,{"className":"relative grid grid-cols-[minmax(0,1fr)] gap-3","children":[["$","span",null,{"aria-hidden":"true","className":"-left-7 absolute top-0 grid size-[1.375rem] place-items-center border border-line bg-void font-bold font-mono text-2xs text-phosphor tabular-nums","children":1}],["$","p",null,{"className":"text-pretty text-foreground/85 text-sm","children":"Install the following dependencies."}],["$","figure",null,{"className":"border border-line bg-panel-sunken","data-slot":"code-block","children":[null,["$","div",null,{"className":"relative","children":[["$","div",null,{"className":"[&_pre]:!bg-transparent overflow-x-auto py-3.5 pr-12 pl-4 font-mono text-xs leading-relaxed [&_pre]:outline-none","dangerouslySetInnerHTML":{"__html":"

npm install @base-ui/react

"}}],["$","$L2c",null,{"className":"absolute top-2.5 right-2.5","label":"Copy the code","text":"npm install @base-ui/react"}]]}]]}]]}],["$","li",null,{"className":"relative grid grid-cols-[minmax(0,1fr)] gap-3","children":[["$","span",null,{"aria-hidden":"true","className":"-left-7 absolute top-0 grid size-[1.375rem] place-items-center border border-line bg-void font-bold font-mono text-2xs text-phosphor tabular-nums","children":2}],["$","p",null,{"className":"text-pretty text-foreground/85 text-sm","children":"Copy the following into your project."}],["$","div",null,{"className":"grid grid-cols-[minmax(0,1fr)] gap-4","children":[["$","figure","components/ui/slider.tsx",{"className":"border border-line bg-panel-sunken","data-slot":"code-block","children":[["$","figcaption",null,{"className":"border-line border-b px-3 py-2 font-mono text-2xs text-phosphor-dim tracking-terminal-xs","children":"components/ui/slider.tsx"}],["$","div",null,{"className":"relative","children":[["$","div",null,{"className":"[&_pre]:!bg-transparent overflow-x-auto py-3.5 pr-12 pl-4 font-mono text-xs leading-relaxed [&_pre]:outline-none","dangerouslySetInnerHTML":{"__html":"$2d"}}],"$L2e"]}]]}]]}]]}],"$L2f"]]}]}]]}]