{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slider", "title": "Slider", "description": "Slider from the Get IT Done design system.", "dependencies": [], "registryDependencies": [ "https://zero-design.itdone.de/r/labels-context.json", "https://zero-design.itdone.de/r/utils.json", "https://zero-design.itdone.de/r/theme.json" ], "files": [ { "path": "registry/ui/slider.tsx", "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { useLabels } from '@/components/ui/labels-context';\n\n// The native range input stays the interactive element (keyboard, pointer, forms, assistive tech) but is\n// visually hidden; a styled thumb and fill are drawn from the same value so every theme token applies.\nconst THUMB_REM = 1.5;\n\nconst nativeThumb = [\n '[&::-webkit-slider-thumb]:pointer-events-auto',\n '[&::-webkit-slider-thumb]:h-6',\n '[&::-webkit-slider-thumb]:w-6',\n '[&::-webkit-slider-thumb]:appearance-none',\n '[&::-moz-range-thumb]:pointer-events-auto',\n '[&::-moz-range-thumb]:h-6',\n '[&::-moz-range-thumb]:w-6',\n '[&::-moz-range-thumb]:border-0',\n];\n\nconst inputBase = [\n 'absolute',\n 'inset-0',\n 'm-0',\n 'h-6',\n 'w-full',\n 'cursor-pointer',\n 'appearance-none',\n 'bg-transparent',\n 'opacity-0',\n 'disabled:cursor-not-allowed',\n ...nativeThumb,\n];\n\nconst toPercent = (value: number, min: number, max: number) => (max > min ? ((value - min) / (max - min)) * 100 : 0);\n\n// Left offset that keeps the visual thumb centred where the native thumb sits (it travels width minus thumb width).\nconst thumbLeft = (percent: number) => `calc(${percent}% - ${(percent / 100) * THUMB_REM}rem)`;\nconst thumbCenter = (percent: number) => `calc(${percent}% + ${(0.5 - percent / 100) * THUMB_REM}rem)`;\n\ntype ValueLabel = 'none' | 'bottom' | 'top-floating';\n\ninterface SliderShared {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n // Where the current value is shown: nowhere, under the track, or in a bubble above the thumb.\n valueLabel?: ValueLabel;\n // Text for the value label and `aria-valuetext`, for example (v) => `${v} h`.\n formatValue?: (value: number) => string;\n className?: string;\n name?: string;\n id?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n}\n\nconst Thumb = ({ percent, peer, disabled }: { percent: number; peer: string; disabled?: boolean }) => (\n \n);\n\nconst Bubble = ({ percent, children, floating }: { percent: number; children: React.ReactNode; floating: boolean }) => (\n \n {children}\n \n);\n\nconst frame = (valueLabel: ValueLabel) =>\n cn('relative w-full', valueLabel === 'top-floating' && 'pt-12', valueLabel === 'bottom' && 'pb-8');\n\nexport interface SliderProps extends SliderShared {\n value?: number;\n defaultValue?: number;\n onValueChange?: (value: number) => void;\n}\n\nconst Slider = React.forwardRef(\n (\n {\n value,\n defaultValue,\n onValueChange,\n min = 0,\n max = 100,\n step = 1,\n disabled,\n valueLabel = 'none',\n formatValue,\n className,\n ...aria\n },\n ref,\n ) => {\n const [inner, setInner] = React.useState(defaultValue ?? min);\n const current = value ?? inner;\n const percent = toPercent(current, min, max);\n const format = formatValue ?? ((v: number) => String(v));\n return (\n
\n
\n \n \n {\n const next = Number(event.target.value);\n setInner(next);\n onValueChange?.(next);\n }}\n className={cn('peer', inputBase)}\n {...aria}\n />\n \n
\n {valueLabel !== 'none' && (\n \n {format(current)}\n \n )}\n
\n );\n },\n);\nSlider.displayName = 'Slider';\n\nexport interface RangeSliderProps extends Omit {\n value?: [number, number];\n defaultValue?: [number, number];\n onValueChange?: (value: [number, number]) => void;\n // Accessible names of the two thumbs. Required because a range exposes two sliders.\n minLabel?: string;\n maxLabel?: string;\n // Form field names for the lower and upper value.\n minName?: string;\n maxName?: string;\n}\n\nconst RangeSlider = React.forwardRef(\n (\n {\n value,\n defaultValue,\n onValueChange,\n min = 0,\n max = 100,\n step = 1,\n disabled,\n valueLabel = 'none',\n formatValue,\n className,\n minLabel: minLabelProp,\n maxLabel: maxLabelProp,\n minName,\n maxName,\n id,\n 'aria-label': groupLabel,\n 'aria-labelledby': labelledBy,\n 'aria-describedby': describedBy,\n },\n ref,\n ) => {\n const l = useLabels();\n const minLabel = minLabelProp ?? l.minimum;\n const maxLabel = maxLabelProp ?? l.maximum;\n const [inner, setInner] = React.useState<[number, number]>(defaultValue ?? [min, max]);\n const [low, high] = value ?? inner;\n const lowPercent = toPercent(low, min, max);\n const highPercent = toPercent(high, min, max);\n const format = formatValue ?? ((v: number) => String(v));\n const commit = (next: [number, number]) => {\n setInner(next);\n onValueChange?.(next);\n };\n const lowOnTop = low > min + (max - min) / 2;\n return (\n \n
\n \n \n commit([Math.min(Number(event.target.value), high), high])}\n className={cn('peer/low pointer-events-none', inputBase, lowOnTop ? 'z-10' : 'z-0')}\n />\n \n commit([low, Math.max(Number(event.target.value), low)])}\n className={cn('peer/high pointer-events-none', inputBase, lowOnTop ? 'z-0' : 'z-10')}\n />\n \n
\n {valueLabel !== 'none' && (\n <>\n \n {format(low)}\n \n \n {format(high)}\n \n \n )}\n \n );\n },\n);\nRangeSlider.displayName = 'RangeSlider';\n\nexport { RangeSlider, Slider };\n", "type": "registry:ui" } ], "type": "registry:ui" }