{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"slider","type":"registry:ui","title":"Slider","description":"A native range input styled to match, with accessible value text.","dependencies":[],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/slider.tsx","type":"registry:ui","target":"components/ui/slider.tsx","content":"\"use client\";\n\nimport { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps } from \"react\";\nimport \"./slider.css\";\n\nexport type SliderProps = Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A native range input with an ink fill that tracks the value and a raised\n * thumb that grows slightly while dragged. Pair it with a number field when\n * people need exact entry.\n */\nexport function Slider({ ref, onInput, ...props }: SliderProps) {\n  const input = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => input.current!, []);\n\n  function sync() {\n    const element = input.current;\n    if (!element) return;\n    const min = Number(element.min || 0);\n    const max = Number(element.max || 100);\n    const ratio = max > min ? (Number(element.value) - min) / (max - min) : 0;\n    element.style.setProperty(\"--fill\", `${Math.min(1, Math.max(0, ratio)) * 100}%`);\n  }\n\n  // Controlled values change without an input event; resync every render.\n  useLayoutEffect(sync);\n\n  return (\n    <input\n      data-slot=\"slider\"\n      {...props}\n      ref={input}\n      type=\"range\"\n      onInput={(event) => {\n        sync();\n        onInput?.(event);\n      }}\n    />\n  );\n}\n"},{"path":"ui/slider.css","type":"registry:file","target":"components/ui/slider.css","content":"/* slider.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"slider\"] {\n    display: block;\n    width: 100%;\n    min-width: 0;\n    height: var(--control-height);\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    border-radius: var(--radius-control);\n    outline: none;\n    cursor: pointer;\n    touch-action: manipulation;\n  }\n\n  [data-slot=\"slider\"]:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  [data-slot=\"slider\"]::-webkit-slider-runnable-track {\n    height: 4px;\n    border-radius: 2px;\n    background: linear-gradient(\n      to right,\n      var(--accent) 0 var(--fill, 50%),\n      color-mix(in srgb, var(--border-strong) 45%, var(--sunken)) var(--fill, 50%) 100%\n    );\n    box-shadow: inset 0 1px 1px rgb(20 20 28 / 12%);\n  }\n  [data-slot=\"slider\"]::-moz-range-track {\n    height: 4px;\n    border-radius: 2px;\n    background: color-mix(in srgb, var(--border-strong) 45%, var(--sunken));\n  }\n  [data-slot=\"slider\"]::-moz-range-progress {\n    height: 4px;\n    border-radius: 2px;\n    background: var(--accent);\n  }\n  [data-slot=\"slider\"]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    width: 20px;\n    height: 20px;\n    margin-top: -8px;\n    appearance: none;\n    border: 0;\n    border-radius: 50%;\n    background: var(--raised);\n    box-shadow: var(--shadow-raised);\n    transition: transform 200ms var(--ease-settle);\n  }\n  [data-slot=\"slider\"]::-moz-range-thumb {\n    box-sizing: border-box;\n    width: 20px;\n    height: 20px;\n    border: 0;\n    border-radius: 50%;\n    background: var(--raised);\n    box-shadow: var(--shadow-raised);\n    transition: transform 200ms var(--ease-settle);\n  }\n  [data-theme=\"dark\"] [data-slot=\"slider\"]::-webkit-slider-thumb,\n  :root[data-theme=\"dark\"] [data-slot=\"slider\"]::-webkit-slider-thumb {\n    background: var(--foreground);\n  }\n  [data-theme=\"dark\"] [data-slot=\"slider\"]::-moz-range-thumb {\n    background: var(--foreground);\n  }\n  [data-slot=\"slider\"]:active:not(:disabled)::-webkit-slider-thumb {\n    transform: scale(1.12);\n  }\n  [data-slot=\"slider\"]:active:not(:disabled)::-moz-range-thumb {\n    transform: scale(1.12);\n  }\n  [data-slot=\"slider\"]:focus-visible {\n    outline: none;\n  }\n  [data-slot=\"slider\"]:focus-visible::-webkit-slider-thumb {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n  [data-slot=\"slider\"]:focus-visible::-moz-range-thumb {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  @media (forced-colors: active) {\n    [data-slot=\"slider\"]:focus-visible {\n      outline-color: Highlight;\n    }\n    [data-slot=\"slider\"] {\n      forced-color-adjust: none;\n    }\n    [data-slot=\"slider\"]::-webkit-slider-runnable-track {\n      background: CanvasText;\n    }\n    [data-slot=\"slider\"]::-moz-range-track {\n      background: CanvasText;\n    }\n    [data-slot=\"slider\"]::-webkit-slider-thumb {\n      background: CanvasText;\n      border-color: Canvas;\n    }\n    [data-slot=\"slider\"]::-moz-range-thumb {\n      background: CanvasText;\n      border-color: Canvas;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"slider\"]::-webkit-slider-thumb {\n      transition: none;\n    }\n    [data-slot=\"slider\"]:active::-webkit-slider-thumb {\n      transform: none;\n    }\n  }\n}\n"}],"categories":["inputs"],"meta":{"tier":"free","license":"MIT","family":"slider-refresh","docs":"/docs/components/slider"}}