{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slider", "title": "Slider", "description": "Picks a value or a range by feel, as a thin line, a thick volume track, labelled steps or a value bubble, with full keyboard control.", "dependencies": [ "radix-ui", "motion" ], "registryDependencies": [ "utils", "https://miseui.junsu4621.workers.dev/r/motion.json" ], "files": [ { "path": "registry/miseui/ui/slider.tsx", "content": "import type * as React from \"react\"\nimport { useState } from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\nimport {\n composePointer,\n resolveMarks,\n SliderMarks,\n toPercent,\n useRubberStretch,\n type SliderMark,\n} from \"@/registry/miseui/ui/slider-parts\"\nimport { HALF_THUMB_PX, SliderStage, type SliderVariant } from \"@/registry/miseui/ui/slider-stage\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ntype SliderEffect = \"rubber\"\n\ntype SliderProps = Omit, \"orientation\" | \"inverted\"> & {\n /** `plain` thin line, `filled` thick track with the thumb inside, `stepped` ticks and labels, `label` value bubble. */\n variant?: SliderVariant\n /** `rubber` stretches the slider with resistance when dragged past an end. */\n effect?: SliderEffect\n /** Ticks for `stepped`. Omitted, they are worked out from `step`. */\n marks?: readonly SliderMark[]\n /** Text for the bubble, the tick labels and assistive tech. */\n formatValue?: (value: number) => string\n}\n\nconst ROOT_CLASS = \"relative flex w-full touch-none flex-col select-none data-disabled:opacity-50\"\n\n/** Mirrors Radix's own state, because fill, ticks and bubble have to know the value in React. */\nfunction useTrackedValues({ value, defaultValue, onValueChange }: SliderProps, min: number) {\n const [uncontrolled, setUncontrolled] = useState(defaultValue ?? [min])\n return {\n values: value ?? uncontrolled,\n onValueChange: (next: number[]) => {\n setUncontrolled(next)\n onValueChange?.(next)\n },\n }\n}\n\nfunction Slider({\n variant = \"plain\",\n effect,\n marks,\n formatValue = String,\n className,\n min = 0,\n max = 100,\n step = 1,\n \"aria-label\": label,\n \"aria-labelledby\": labelledBy,\n \"aria-describedby\": describedBy,\n ...props\n}: SliderProps) {\n const { values, onValueChange } = useTrackedValues(props, min)\n const percents = values.map((entry) => toPercent(entry, min, max))\n const rubber = useRubberStretch(effect === \"rubber\" && !props.disabled)\n const stage = { variant, values, percents, formatValue, rubber, thumbAria: { label, labelledBy, describedBy } }\n const scale = { min, max, halfThumb: HALF_THUMB_PX[variant] }\n return (\n \n \n {variant === \"stepped\" ? (\n 1 ? values[0] : min}\n high={values[values.length - 1]}\n values={values}\n />\n ) : null}\n \n )\n}\n\nexport { Slider, type SliderProps, type SliderVariant, type SliderEffect, type SliderMark }\n", "type": "registry:ui" }, { "path": "registry/miseui/ui/slider-stage.tsx", "content": "import type * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\nimport { motion } from \"motion/react\"\nimport { thumbCentreOffset, type useRubberStretch } from \"@/registry/miseui/ui/slider-parts\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ntype SliderVariant = \"plain\" | \"filled\" | \"stepped\" | \"label\"\n\n/** Half the rendered thumb width. Radix measures the thumb, so these must match THUMB_CLASS or the fill drifts. */\nconst HALF_THUMB_PX: Record = { plain: 10, filled: 12, stepped: 10, label: 10 }\n\nconst ROUND_THUMB_CLASS = \"block size-5 rounded-full border border-input bg-background shadow-sm dark:bg-foreground\"\n\nconst THUMB_CLASS: Record = {\n plain: ROUND_THUMB_CLASS,\n filled: \"flex h-8 w-6 items-center justify-center rounded-lg\",\n stepped: ROUND_THUMB_CLASS,\n label: ROUND_THUMB_CLASS,\n}\n\nconst TRACK_CLASS: Record = {\n plain: \"h-1 rounded-full bg-input\",\n filled: \"h-8 overflow-hidden rounded-lg bg-input/70\",\n stepped: \"h-1 rounded-full bg-input\",\n label: \"h-1 rounded-full bg-input\",\n}\n\nfunction thumbName(label: string | undefined, index: number, total: number) {\n if (!label || total < 2) return label\n if (index === 0) return `${label}, minimum`\n return index === total - 1 ? `${label}, maximum` : `${label}, ${index + 1} of ${total}`\n}\n\nfunction fillStyle(percents: readonly number[], variant: SliderVariant): React.CSSProperties {\n const halfThumb = HALF_THUMB_PX[variant]\n // A filled track wraps the whole thumb, so its grip always sits on the fill and a stub shows even at zero.\n const pad = variant === \"filled\" ? halfThumb : 0\n const first = percents[0]\n const last = percents[percents.length - 1]\n const end = thumbCentreOffset(last, halfThumb) + pad\n if (percents.length < 2) return { insetInlineStart: 0, width: `calc(${last}% + ${end}px)` }\n const start = thumbCentreOffset(first, halfThumb) - pad\n return {\n insetInlineStart: `calc(${first}% + ${start}px)`,\n width: `calc(${last - first}% + ${end - start}px)`,\n }\n}\n\ntype SliderThumbProps = React.ComponentProps & {\n variant: SliderVariant\n percent: number\n text: string\n}\n\nfunction SliderThumb({ variant, percent, text, ...props }: SliderThumbProps) {\n return (\n \n {variant === \"filled\" ? (\n \n ) : null}\n {variant === \"label\" ? (\n // Anchored by percent, so the bubble ends flush with the track at both ends instead of overflowing it.\n \n {text}\n \n ) : null}\n \n )\n}\n\n/** Focus lands on a thumb, not on the root, so name and description have to reach it to be heard. */\ninterface ThumbAria {\n label: string | undefined\n labelledBy: string | undefined\n describedBy: string | undefined\n}\n\ninterface SliderStageProps {\n variant: SliderVariant\n values: readonly number[]\n percents: readonly number[]\n formatValue: (value: number) => string\n rubber: ReturnType\n thumbAria: ThumbAria\n}\n\n/** Transforms live here, not on the root, whose rect Radix reads to turn a pointer into a value. */\nfunction SliderStage({ variant, values, percents, formatValue, rubber, thumbAria }: SliderStageProps) {\n return (\n \n \n \n \n {values.map((entry, index) => (\n \n ))}\n \n )\n}\n\nexport { HALF_THUMB_PX, SliderStage, type SliderVariant }\n", "type": "registry:ui" }, { "path": "registry/miseui/ui/slider-parts.tsx", "content": "import type * as React from \"react\"\nimport { useRef, useState } from \"react\"\nimport { animate, useMotionValue, useReducedMotion, useTransform } from \"motion/react\"\nimport { rubberband, SPRING_DEFAULT } from \"@/registry/miseui/lib/motion\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ninterface SliderMark {\n value: number\n label?: React.ReactNode\n}\n\ntype StretchSide = \"left\" | \"right\"\n\nconst MAX_AUTO_TICKS = 11\nconst MAX_AUTO_LABELS = 6\n/** The track gets thinner as it stretches, the way a rubber band does; a quarter of the stretch keeps it subtle. */\nconst SQUASH_FACTOR = 0.25\n\n/**\n * Radix keeps a thumb inside the track by pulling it inward as it nears an end, so its centre is not at\n * `percent`. Fill and ticks use the same formula to meet the thumb's centre exactly. In px past `percent`.\n */\nfunction thumbCentreOffset(percent: number, halfThumb: number) {\n return halfThumb * (1 - percent / 50)\n}\n\nfunction thumbCentre(percent: number, halfThumb: number) {\n return `calc(${percent}% + ${thumbCentreOffset(percent, halfThumb)}px)`\n}\n\nfunction toPercent(value: number, min: number, max: number) {\n if (max === min) return 0\n return ((value - min) / (max - min)) * 100\n}\n\n/** Evenly spaced ticks from the step, thinned to a countable number; labels only where they can all fit. */\nfunction resolveMarks(\n marks: readonly SliderMark[] | undefined,\n { min, max, step, format }: { min: number; max: number; step: number; format: (value: number) => React.ReactNode },\n): readonly SliderMark[] {\n if (marks) return marks\n const intervals = Math.max(1, Math.round((max - min) / step))\n const stride = Math.ceil(intervals / (MAX_AUTO_TICKS - 1))\n const count = Math.floor(intervals / stride) + 1\n const labelAll = count <= MAX_AUTO_LABELS\n return Array.from({ length: count }, (_, index) => {\n const value = min + index * stride * step\n const showLabel = labelAll || index === 0 || index === count - 1\n return { value, label: showLabel ? format(value) : undefined }\n })\n}\n\ninterface SliderMarksProps {\n marks: readonly SliderMark[]\n min: number\n max: number\n halfThumb: number\n /** Everything between these is inside the selected range. */\n low: number\n high: number\n values: readonly number[]\n}\n\nfunction SliderMarks({ marks, min, max, halfThumb, low, high, values }: SliderMarksProps) {\n return (\n // The touch stage is taller than the track; pull the marks back up so they still read as part of it.\n \n {marks.map((mark) => {\n const percent = toPercent(mark.value, min, max)\n const inRange = mark.value >= low && mark.value <= high\n return (\n \n \n {mark.label === undefined ? null : (\n // Anchored by percent, so the first and last labels end flush with the track instead of overflowing it.\n \n {mark.label}\n \n )}\n \n )\n })}\n \n )\n}\n\n/** Stretches the slider past its ends while dragging. Pointer moves arrive here because Radix captures the pointer. */\nfunction useRubberStretch(enabled: boolean) {\n const reduceMotion = useReducedMotion() ?? false\n const active = enabled && !reduceMotion\n const overshoot = useMotionValue(0)\n const scaleX = useTransform(overshoot, (ratio) => 1 + Math.abs(ratio))\n const scaleY = useTransform(overshoot, (ratio) => 1 - Math.abs(ratio) * SQUASH_FACTOR)\n // Keyed on the sign, not on state, so the origin holds still while the release spring settles back.\n const originX = useTransform(overshoot, (ratio) => (ratio < 0 ? 1 : 0))\n const [side, setSide] = useState(null)\n const dragRect = useRef(null)\n\n const handlers = {\n onPointerDown: (event: React.PointerEvent) => {\n if (active) dragRect.current = event.currentTarget.getBoundingClientRect()\n },\n onPointerMove: (event: React.PointerEvent) => {\n const rect = dragRect.current\n if (!rect || rect.width === 0) return\n const past =\n event.clientX < rect.left ? event.clientX - rect.left : event.clientX > rect.right ? event.clientX - rect.right : 0\n overshoot.set(rubberband(past, rect.width) / rect.width)\n setSide(past === 0 ? null : past < 0 ? \"left\" : \"right\")\n },\n onPointerEnd: () => {\n if (!dragRect.current) return\n dragRect.current = null\n setSide(null)\n animate(overshoot, 0, SPRING_DEFAULT)\n },\n }\n return { active, side, style: { scaleX, scaleY, originX }, handlers }\n}\n\ntype RubberHandlers = ReturnType[\"handlers\"]\ntype PointerProps = Pick<\n React.ComponentProps<\"span\">,\n \"onPointerDown\" | \"onPointerMove\" | \"onPointerUp\" | \"onPointerCancel\"\n>\n\n/** The owner's handlers run first, like Radix's own composition. */\nfunction composePointer(owner: PointerProps, rubber: RubberHandlers): PointerProps {\n return {\n onPointerDown: (event) => {\n owner.onPointerDown?.(event)\n rubber.onPointerDown(event)\n },\n onPointerMove: (event) => {\n owner.onPointerMove?.(event)\n rubber.onPointerMove(event)\n },\n onPointerUp: (event) => {\n owner.onPointerUp?.(event)\n rubber.onPointerEnd()\n },\n onPointerCancel: (event) => {\n owner.onPointerCancel?.(event)\n rubber.onPointerEnd()\n },\n }\n}\n\nexport {\n composePointer,\n resolveMarks,\n SliderMarks,\n thumbCentre,\n thumbCentreOffset,\n toPercent,\n useRubberStretch,\n type SliderMark,\n}\n", "type": "registry:ui" } ], "categories": [ "forms" ], "type": "registry:ui" }