{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vertical-slider",
  "title": "Vertical Slider",
  "description": "A vertical range input with configurable value labels, thumb shapes, colors, and height.",
  "dependencies": [],
  "files": [
    {
      "path": "components/input/VerticalSlider.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { CSSProperties, ChangeEvent, InputHTMLAttributes } from \"react\";\n\ntype VerticalSliderProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"min\" | \"max\" | \"step\"\n> & {\n  value?: number;\n  defaultValue?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  // eslint-disable-next-line no-unused-vars\n  onValueChange?: (value: number) => void;\n  height?: number;\n  showValue?: boolean;\n  thumbShape?: \"round\" | \"pill\" | \"square\";\n  trackColor?: string;\n  fillColor?: string;\n  thumbColor?: string;\n  // eslint-disable-next-line no-unused-vars\n  formatValue?: (value: number) => string;\n  className?: string;\n};\n\nexport default function VerticalSlider({\n  value,\n  defaultValue = 650,\n  min = 0,\n  max = 1500,\n  step = 1,\n  onValueChange,\n  height = 160,\n  showValue = false,\n  thumbShape = \"round\",\n  trackColor = \"var(--color-muted, #dbeafe)\",\n  fillColor = \"var(--color-primary, #1e3a5f)\",\n  thumbColor = \"var(--color-foreground, #0f172a)\",\n  formatValue = String,\n  className = \"\",\n  disabled,\n  ...props\n}: VerticalSliderProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const currentValue = value ?? internalValue;\n  const [isActive, setIsActive] = useState(false);\n  const range = Math.max(max - min, 1);\n  const progress = Math.min(100, Math.max(0, ((currentValue - min) / range) * 100));\n  const thumbWidth = thumbShape === \"pill\" ? 12 : 16;\n  const thumbHeight = thumbShape === \"pill\" ? 28 : 16;\n  const thumbRadius = thumbShape === \"square\" ? 2 : 999;\n  const fillColorStyle = {\n    \"--vertical-slider-fill\": fillColor,\n  } as CSSProperties & Record<`--${string}`, string | number>;\n\n  const sliderStyle = {\n    width: height,\n    \"--vertical-slider-track\": \"8px\",\n    \"--vertical-slider-thumb-color\": thumbColor,\n    \"--vertical-slider-thumb-width\": `${thumbWidth}px`,\n    \"--vertical-slider-thumb-height\": `${thumbHeight}px`,\n    \"--vertical-slider-thumb-radius\": `${thumbRadius}px`,\n    background: `linear-gradient(to right, ${fillColor} 0%, ${fillColor} ${progress}%, ${trackColor} ${progress}%, ${trackColor} 100%)`,\n  } as CSSProperties & Record<`--${string}`, string | number>;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = event.target.valueAsNumber;\n    if (value === undefined) setInternalValue(nextValue);\n    onValueChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")}\n      style={fillColorStyle}\n    >\n      <span className=\"text-[10px] font-medium tabular-nums text-[color:var(--color-muted-foreground,#6b7280)]\">{formatValue(max)}</span>\n\n      <div className=\"relative flex w-16 items-center justify-center\" style={{ height }}>\n        <style>{`\n          .vertical-slider-input {\n            -webkit-appearance: none;\n            appearance: none;\n            position: absolute;\n            height: var(--vertical-slider-track);\n            border-radius: 999px;\n            cursor: pointer;\n            transform: translate(-50%, -50%) rotate(-90deg);\n          }\n          .vertical-slider-input::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            appearance: none;\n            width: var(--vertical-slider-thumb-width);\n            height: var(--vertical-slider-thumb-height);\n            border: 0;\n            border-radius: var(--vertical-slider-thumb-radius);\n            background: var(--vertical-slider-thumb-color);\n            box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);\n          }\n          .vertical-slider-input::-moz-range-thumb {\n            width: var(--vertical-slider-thumb-width);\n            height: var(--vertical-slider-thumb-height);\n            border: 0;\n            border-radius: var(--vertical-slider-thumb-radius);\n            background: var(--vertical-slider-thumb-color);\n            box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);\n          }\n          .vertical-slider-input:focus-visible {\n            outline: 2px solid color-mix(in srgb, var(--vertical-slider-fill) 78%, black);\n            outline-offset: 4px;\n          }\n          .vertical-slider-input:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n          }\n        `}</style>\n\n        <input\n          {...props}\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={currentValue}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={() => setIsActive(true)}\n          onBlur={() => setIsActive(false)}\n          onMouseEnter={() => setIsActive(true)}\n          onMouseLeave={() => setIsActive(false)}\n          className=\"vertical-slider-input left-1/2 top-1/2\"\n          style={sliderStyle}\n        />\n\n        {(showValue || isActive) && (\n          <output\n            className=\"pointer-events-none absolute left-[calc(50%+18px)] rounded-full px-2 py-0.5 text-[10px] font-semibold tabular-nums text-white\"\n            style={{\n              top: `${100 - progress}%`,\n              transform: \"translateY(-50%)\",\n              backgroundColor: \"color-mix(in srgb, var(--vertical-slider-fill) 78%, black)\",\n            }}\n          >\n            {formatValue(currentValue)}\n          </output>\n        )}\n      </div>\n\n      <span className=\"text-[10px] font-medium tabular-nums text-[color:var(--color-muted-foreground,#6b7280)]\">{formatValue(min)}</span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/input/VerticalSlider.tsx"
    }
  ],
  "categories": [
    "input"
  ],
  "type": "registry:component"
}