{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "A ruler with a pen-nib marker.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/slider.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\n\n// Ticks are placed by value: a tall tick every 10%, a short one every 2%, plus the closing 100% tick.\nconst RULER = [\n  \"linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 10% 55% repeat-x\",\n  \"linear-gradient(90deg, var(--ink-muted) 1px, transparent 1px) 0 0 / 2% 28% repeat-x\",\n  \"linear-gradient(270deg, var(--ink) 1px, transparent 1px) 0 0 / 100% 55% no-repeat\",\n  \"var(--paper-raised)\",\n].join(\", \");\n\n// Radix keeps the thumb inside the root, so its centre travels from THUMB/2 to (width - THUMB/2).\n// Insetting the ruler by the same amount makes the nib's tip land exactly on the value.\nconst THUMB = 16;\n\n/** A wooden-ruler slider with a pen-nib marker. */\nexport function Slider({ className = \"\", defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const count = (value ?? defaultValue ?? [min]).length;\n  return (\n    <SliderPrimitive.Root\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={`relative flex w-full touch-none select-none items-center pt-3 data-[disabled]:opacity-50 ${className}`}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        className=\"relative h-7 grow overflow-hidden rounded-[2px] shadow-[0_0_0_1px_var(--edge),0_2px_4px_-1px_rgb(0_0_0/.2)]\"\n        style={{ background: RULER, marginInline: THUMB / 2 }}\n      >\n        <SliderPrimitive.Range className=\"absolute h-full bg-[color-mix(in_srgb,var(--pen)_18%,transparent)]\" />\n      </SliderPrimitive.Track>\n      {Array.from({ length: count }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          className=\"block h-[30px] w-(--thumb) -translate-y-[10px] cursor-grab bg-(--pen) outline-none drop-shadow-[0_2px_2px_rgb(0_0_0/.35)] transition-transform hover:-translate-y-[11px] focus-visible:scale-125 focus-visible:brightness-125 active:cursor-grabbing\"\n          style={{ \"--thumb\": `${THUMB}px`, clipPath: \"polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%)\" } as React.CSSProperties}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "radix-ui"
  ]
}