{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "dependencies": [
    "@number-flow/react",
    "@radix-ui/react-slider"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/slider.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport NumberFlow from '@number-flow/react';\nimport * as SliderPrimitive from '@radix-ui/react-slider';\nimport { GripVertical } from 'lucide-react';\nimport * as React from 'react';\n\ninterface DualRangeSliderProps extends React.ComponentProps<typeof SliderPrimitive.Root> {\n  labelPosition?: 'top' | 'bottom' | 'static';\n  lableContenPos?: 'left' | 'right';\n  label?: React.ReactNode | ((value: number | undefined) => React.ReactNode);\n}\n\nconst DualRangeSlider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  DualRangeSliderProps\n>(({ className, label, labelPosition = 'top', lableContenPos = 'right', ...props }, ref) => {\n  const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max];\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      className={cn('relative flex w-full touch-none select-none items-center', className)}\n      {...props}\n    >\n      <SliderPrimitive.Track className='relative h-6 w-full grow overflow-hidden bg-[linear-gradient(to_right,#e2e2e22c_1px,transparent_1px),linear-gradient(to_bottom,#9c9c9c2c_1px,transparent_1px)] bg-size-[4px_4px] dark:bg-neutral-950 bg-neutral-50 rounded-md dark:bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)]'>\n        <SliderPrimitive.Range className='absolute h-full dark:bg-neutral-100 bg-neutral-950' />\n      </SliderPrimitive.Track>\n      <>\n        {initialValue.map((value, index) => (\n          <React.Fragment key={value}>\n            <SliderPrimitive.Thumb className='relative grid h-6 w-3 cursor-grab place-content-center dark:bg-neutral-100 bg-neutral-950 shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-white'>\n              {label && labelPosition !== 'static' && (\n                <div\n                  className={cn(\n                    'absolute flex w-full justify-center items-start gap-0.5',\n                    labelPosition === 'top' && '-top-7',\n                    labelPosition === 'bottom' && 'top-4'\n                  )}\n                >\n                  {lableContenPos === 'left' && (\n                    <>\n                      {typeof label === 'function' ? (\n                        <span className='inline-block  -translate-y-0.5'>{label(value)}</span>\n                      ) : (\n                        label && <span className='inline-block '>{label}</span>\n                      )}\n                    </>\n                  )}\n                  <NumberFlow\n                    willChange\n                    // @ts-expect-error\n                    value={value}\n                    isolate\n                    opacityTiming={{\n                      duration: 250,\n                      easing: 'ease-out',\n                    }}\n                    transformTiming={{\n                      easing: `linear(0, 0.0033 0.8%, 0.0263 2.39%, 0.0896 4.77%, 0.4676 15.12%, 0.5688, 0.6553, 0.7274, 0.7862, 0.8336 31.04%, 0.8793, 0.9132 38.99%, 0.9421 43.77%, 0.9642 49.34%, 0.9796 55.71%, 0.9893 62.87%, 0.9952 71.62%, 0.9983 82.76%, 0.9996 99.47%)`,\n                      duration: 500,\n                    }}\n                  />\n                  {lableContenPos === 'right' && (\n                    <>\n                      {typeof label === 'function' ? (\n                        <span className='inline-block  -translate-y-1'>{label(value)}</span>\n                      ) : (\n                        label && <span className='inline-block '>{label}</span>\n                      )}\n                    </>\n                  )}\n                </div>\n              )}\n              <GripVertical size={16} className='px-0.5 text-primary-foreground' />\n            </SliderPrimitive.Thumb>\n          </React.Fragment>\n        ))}\n      </>\n\n      {label && labelPosition === 'static' && (\n        <>\n          {initialValue.map((value, index) => (\n            <div\n              key={`${value}-${index}`}\n              className={cn(\n                'absolute -top-7 w-fit right-0 flex  justify-center items-start gap-0.5'\n              )}\n            >\n              {lableContenPos === 'left' && (\n                <>\n                  {typeof label === 'function' ? (\n                    <span className='inline-block  -translate-y-0.5'>{label(value)}</span>\n                  ) : (\n                    label && <span className='inline-block '>{label}</span>\n                  )}\n                </>\n              )}\n              <NumberFlow\n                willChange\n                // @ts-expect-error\n                value={value}\n                isolate\n                opacityTiming={{\n                  duration: 250,\n                  easing: 'ease-out',\n                }}\n                transformTiming={{\n                  easing: `linear(0, 0.0033 0.8%, 0.0263 2.39%, 0.0896 4.77%, 0.4676 15.12%, 0.5688, 0.6553, 0.7274, 0.7862, 0.8336 31.04%, 0.8793, 0.9132 38.99%, 0.9421 43.77%, 0.9642 49.34%, 0.9796 55.71%, 0.9893 62.87%, 0.9952 71.62%, 0.9983 82.76%, 0.9996 99.47%)`,\n                  duration: 500,\n                }}\n              />\n              {lableContenPos === 'right' && (\n                <>\n                  {typeof label === 'function' ? (\n                    <span className='inline-block  -translate-y-1'>{label(value)}</span>\n                  ) : (\n                    label && <span className='inline-block '>{label}</span>\n                  )}\n                </>\n              )}\n            </div>\n          ))}\n        </>\n      )}\n    </SliderPrimitive.Root>\n  );\n});\nDualRangeSlider.displayName = 'DualRangeSlider';\n\nexport { DualRangeSlider };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}