38:I[58715,["/_next/static/immutable/chunks/0m-ud6d21nrwp.js","/_next/static/immutable/chunks/1h-b4l27lciz8.js","/_next/static/immutable/chunks/3y8cybr61yxvv.js","/_next/static/immutable/chunks/3z09e37y-pq2e.js","/_next/static/immutable/chunks/18osjo27s7nr6.js","/_next/static/immutable/chunks/30ak-g_h974fl.js","/_next/static/immutable/chunks/13faqfdblyus9.js","/_next/static/immutable/chunks/3zi-9vbl5dj8-.js","/_next/static/immutable/chunks/3eg8r_f-w3d55.js","/_next/static/immutable/chunks/00h5s_mfz_z0a.js","/_next/static/immutable/chunks/2mxj9ce8hnzxh.js","/_next/static/immutable/chunks/1z8d0-gq--ywx.js","/_next/static/immutable/chunks/1q0rzjij447sg.js","/_next/static/immutable/chunks/1ttnh9n-90xfo.js","/_next/static/immutable/chunks/1p8-tjdoxq_qp.js","/_next/static/immutable/chunks/2g3rkxj5q1792.js","/_next/static/immutable/chunks/2g_6jpjm9d1wy.js","/_next/static/immutable/chunks/0qlv5u6wqxxzu.js","/_next/static/immutable/chunks/1kdw4f9rs02un.js","/_next/static/immutable/chunks/0_o9-rxkbht7h.js","/_next/static/immutable/chunks/0pdq7om71x-ac.js","/_next/static/immutable/chunks/2q1bk6mdo1u5v.js","/_next/static/immutable/chunks/2wqm9b65qyei4.js","/_next/static/immutable/chunks/29f-fic049470.js"],"PreviewTabs"] 39:I[39692,["/_next/static/immutable/chunks/0m-ud6d21nrwp.js","/_next/static/immutable/chunks/1h-b4l27lciz8.js","/_next/static/immutable/chunks/3y8cybr61yxvv.js","/_next/static/immutable/chunks/3z09e37y-pq2e.js","/_next/static/immutable/chunks/18osjo27s7nr6.js","/_next/static/immutable/chunks/30ak-g_h974fl.js","/_next/static/immutable/chunks/13faqfdblyus9.js","/_next/static/immutable/chunks/3zi-9vbl5dj8-.js","/_next/static/immutable/chunks/3eg8r_f-w3d55.js","/_next/static/immutable/chunks/00h5s_mfz_z0a.js","/_next/static/immutable/chunks/2mxj9ce8hnzxh.js","/_next/static/immutable/chunks/1z8d0-gq--ywx.js","/_next/static/immutable/chunks/1q0rzjij447sg.js","/_next/static/immutable/chunks/1ttnh9n-90xfo.js","/_next/static/immutable/chunks/1p8-tjdoxq_qp.js","/_next/static/immutable/chunks/2g3rkxj5q1792.js","/_next/static/immutable/chunks/2g_6jpjm9d1wy.js","/_next/static/immutable/chunks/0qlv5u6wqxxzu.js","/_next/static/immutable/chunks/1kdw4f9rs02un.js","/_next/static/immutable/chunks/0_o9-rxkbht7h.js","/_next/static/immutable/chunks/0pdq7om71x-ac.js","/_next/static/immutable/chunks/2q1bk6mdo1u5v.js","/_next/static/immutable/chunks/2wqm9b65qyei4.js","/_next/static/immutable/chunks/29f-fic049470.js"],"Slider"] 36:T33e8,

"use client"

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

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

const Slider = ({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: SliderPrimitive.Root.Props) => {
  const thumbs = Array.isArray(value)
    ? value.length
    : Array.isArray(defaultValue)
      ? defaultValue.length
      : 1
  return (
    <SliderPrimitive.Root
      data-slot="slider"
      className={cn(
        "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
        className
      )}
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      thumbAlignment="edge"
      {...props}
    >
      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col">
        <SliderPrimitive.Track
          data-slot="slider-track"
          className="relative grow overflow-hidden rounded-full bg-background-tertiary select-none data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4"
        >
          <SliderPrimitive.Indicator
            data-slot="slider-range"
            className="bg-background-inverse select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
          />
        </SliderPrimitive.Track>
        {Array.from({ length: thumbs }, (_, i) => (
          <SliderPrimitive.Thumb
            key={i}
            data-slot="slider-thumb"
            className="block size-20 shrink-0 cursor-grab rounded-full bg-background-primary shadow-dropdown transition-shadow outline-none select-none focus-visible:ring-4 focus-visible:ring-blue-60/50 active:cursor-grabbing disabled:pointer-events-none"
          />
        ))}
      </SliderPrimitive.Control>
    </SliderPrimitive.Root>
  )
}

export { Slider }

35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$36"}}],"$L37"]}] 26:["$","$L38",null,{"glass":false,"preview":["$","div",null,{"className":"flex w-full max-w-480 flex-col gap-24","children":[["$","$L39",null,{"defaultValue":40,"aria-label":"Volume"}],["$","$L39",null,{"defaultValue":[20,70],"aria-label":"Range"}]]}],"code":"$L3a"}]

Installation

Usage