4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T472f,"use client" import { useCallback, useEffect, useRef, useState } from "react" import { animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react" import { useControllableState } from "@/hooks/use-controllable-state" import { cn } from "@/lib/utils" // Drag detection & rubber band (only at the absolute min/max edges — the // two thumbs clamping against each other is a hard boundary, not elastic). const CLICK_THRESHOLD = 3 const DEAD_ZONE = 32 const MAX_CURSOR_RANGE = 200 const MAX_STRETCH = 8 function clamp(v: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, v)) } function decimalsForStep(step: number): number { const s = step.toString() const dot = s.indexOf(".") return dot === -1 ? 0 : s.length - dot - 1 } function roundValue(val: number, step: number): number { const raw = Math.round(val / step) * step return parseFloat(raw.toFixed(decimalsForStep(step))) } type Thumb = "min" | "max" export type ElasticRangeSliderProps = { /** Label shown at the start of the track. */ label: string /** Controlled [min, max] value. Use together with `onValueChange` */ value?: [number, number] /** Initial [min, max] value for uncontrolled mode. Falls back to `[min, max]` */ defaultValue?: [number, number] /** Called with the new [min, max] on drag, click, or key press. */ onValueChange?: (value: [number, number]) => void /** * Minimum value. * @defaultValue 0 */ min?: number /** * Maximum value. * @defaultValue 100 */ max?: number /** * Smallest increment. * @defaultValue 1 */ step?: number /** Format each displayed value. Defaults to `value.toFixed(...)` based on `step` */ formatValue?: (value: number) => string className?: string /** Accessible name for the lower thumb. @defaultValue "Minimum" */ minThumbLabel?: string /** Accessible name for the upper thumb. @defaultValue "Maximum" */ maxThumbLabel?: string } export function ElasticRangeSlider({ label, value: valueProp, defaultValue, onValueChange, min: absoluteMin = 0, max: absoluteMax = 100, step = 1, formatValue, className, minThumbLabel = "Minimum", maxThumbLabel = "Maximum", }: ElasticRangeSliderProps) { const [range = [absoluteMin, absoluteMax], setRange] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? [absoluteMin, absoluteMax], onChange: onValueChange, }) const [min, max] = range const shouldReduceMotion = useReducedMotion() const wrapperRef = useRef(null) const trackRef = useRef(null) const [isHovered, setIsHovered] = useState(false) const [isDragging, setIsDragging] = useState(false) const [keyboardFocusThumb, setKeyboardFocusThumb] = useState( null ) const isActive = isHovered || isDragging // Pointer session state — mutable, does not trigger re-renders. const draggingThumb = useRef(null) const pointerDownPos = useRef<{ x: number; y: number } | null>(null) const isClickRef = useRef(true) const wrapperRectRef = useRef(null) const scaleRef = useRef(1) const minAnimRef = useRef | null>(null) const maxAnimRef = useRef | null>(null) const percentFromValue = useCallback( (v: number) => ((v - absoluteMin) / (absoluteMax - absoluteMin)) * 100, [absoluteMin, absoluteMax] ) const displayMin = formatValue ? formatValue(min) : min.toFixed(decimalsForStep(step)) const displayMax = formatValue ? formatValue(max) : max.toFixed(decimalsForStep(step)) // Each thumb gets its own motion value so drags stay perfectly in sync // frame-to-frame, instead of both re-deriving from combined React state. const minPercent = useMotionValue(percentFromValue(min)) const maxPercent = useMotionValue(percentFromValue(max)) const minLeft = useTransform( minPercent, (pct) => `max(4px, min(calc(100% - 8px), calc(${pct}% - 4px)))` ) const maxLeft = useTransform( maxPercent, (pct) => `max(4px, min(calc(100% - 8px), calc(${pct}% - 4px)))` ) const fillLeft = useTransform(minPercent, (pct) => `${pct}%`) const fillRight = useTransform(maxPercent, (pct) => `${100 - pct}%`) // Rubber band at the absolute edges only. const rubberStretch = useMotionValue(0) const rubberWidth = useTransform( rubberStretch, (s) => `calc(100% + ${Math.abs(s)}px)` ) const rubberX = useTransform(rubberStretch, (s) => (s < 0 ? s : 0)) // Sync from props when not actively dragging that thumb. useEffect(() => { if (draggingThumb.current !== "min" && !minAnimRef.current) { minPercent.jump(percentFromValue(min)) } }, [min, percentFromValue, minPercent]) useEffect(() => { if (draggingThumb.current !== "max" && !maxAnimRef.current) { maxPercent.jump(percentFromValue(max)) } }, [max, percentFromValue, maxPercent]) const positionToValue = useCallback( (clientX: number) => { const rect = wrapperRectRef.current if (!rect) return absoluteMin const sceneX = (clientX - rect.left) / scaleRef.current const nativeWidth = wrapperRef.current?.offsetWidth ?? rect.width const percent = clamp(sceneX / nativeWidth, 0, 1) return clamp( absoluteMin + percent * (absoluteMax - absoluteMin), absoluteMin, absoluteMax ) }, [absoluteMin, absoluteMax] ) const animateThumbTo = useCallback( (thumb: Thumb, targetPercent: number) => { const motionValue = thumb === "min" ? minPercent : maxPercent const animRef = thumb === "min" ? minAnimRef : maxAnimRef animRef.current?.stop() if (shouldReduceMotion) { motionValue.jump(targetPercent) animRef.current = null return } animRef.current = animate(motionValue, targetPercent, { type: "spring", stiffness: 300, damping: 25, mass: 0.8, onComplete: () => { animRef.current = null }, }) }, [minPercent, maxPercent, shouldReduceMotion] ) const stopThumbAnimation = useCallback((thumb: Thumb) => { const animation = thumb === "min" ? minAnimRef : maxAnimRef animation.current?.stop() animation.current = null }, []) const computeRubberStretch = useCallback((clientX: number, sign: number) => { const rect = wrapperRectRef.current if (!rect) return 0 const distancePast = sign < 0 ? rect.left - clientX : clientX - rect.right const overflow = Math.max(0, distancePast - DEAD_ZONE) return ( sign * MAX_STRETCH * Math.sqrt(Math.min(overflow / MAX_CURSOR_RANGE, 1)) ) }, []) const handlePointerDown = useCallback((thumb: Thumb) => { return (e: React.PointerEvent) => { e.preventDefault() e.stopPropagation() ;(e.target as HTMLElement).setPointerCapture(e.pointerId) pointerDownPos.current = { x: e.clientX, y: e.clientY } isClickRef.current = true draggingThumb.current = thumb setIsDragging(true) setKeyboardFocusThumb(null) const wrapper = wrapperRef.current if (wrapper) { const rect = wrapper.getBoundingClientRect() wrapperRectRef.current = rect scaleRef.current = rect.width / wrapper.offsetWidth } } }, []) const handleTrackPointerDown = useCallback( (e: React.PointerEvent) => { const wrapper = wrapperRef.current if (wrapper) { const rect = wrapper.getBoundingClientRect() wrapperRectRef.current = rect scaleRef.current = rect.width / wrapper.offsetWidth } const value = positionToValue(e.clientX) const thumb: Thumb = Math.abs(value - min) <= Math.abs(value - max) ? "min" : "max" pointerDownPos.current = { x: e.clientX, y: e.clientY } isClickRef.current = true draggingThumb.current = thumb setIsDragging(true) setKeyboardFocusThumb(null) ;(e.target as HTMLElement).setPointerCapture(e.pointerId) }, [positionToValue, min, max] ) const handlePointerMove = useCallback( (e: React.PointerEvent) => { const thumb = draggingThumb.current if (!thumb || !pointerDownPos.current) return const dx = e.clientX - pointerDownPos.current.x const dy = e.clientY - pointerDownPos.current.y if (isClickRef.current && Math.hypot(dx, dy) > CLICK_THRESHOLD) { isClickRef.current = false } if (isClickRef.current) return const rect = wrapperRectRef.current if (rect && !shouldReduceMotion) { // The min thumb only rubber-bands past the left edge (absoluteMin); // the max thumb only past the right edge (absoluteMax). Dragging // toward the other thumb is a hard clamp, not elastic. if (thumb === "min" && e.clientX < rect.left) { rubberStretch.jump(computeRubberStretch(e.clientX, -1)) } else if (thumb === "max" && e.clientX > rect.right) { rubberStretch.jump(computeRubberStretch(e.clientX, 1)) } else { rubberStretch.jump(0) } } const rawValue = roundValue(positionToValue(e.clientX), step) // Clamp one step short of the other thumb, not flush against it, so // min and max can never meet or cross. Applied before the motion value // jumps, so the thumb itself (not just the reported value) is bounded. const value = thumb === "min" ? clamp(rawValue, absoluteMin, max - step) : clamp(rawValue, min + step, absoluteMax) const motionValue = thumb === "min" ? minPercent : maxPercent stopThumbAnimation(thumb) motionValue.jump(percentFromValue(value)) setRange(thumb === "min" ? [value, max] : [min, value]) }, [ positionToValue, percentFromValue, setRange, step, min, max, absoluteMin, absoluteMax, minPercent, maxPercent, rubberStretch, computeRubberStretch, shouldReduceMotion, stopThumbAnimation, ] ) const handlePointerUp = useCallback( (e: React.PointerEvent) => { const thumb = draggingThumb.current if (!thumb) return if (isClickRef.current) { const rawValue = positionToValue(e.clientX) const snapped = thumb === "min" ? clamp(roundValue(rawValue, step), absoluteMin, max - step) : clamp(roundValue(rawValue, step), min + step, absoluteMax) animateThumbTo(thumb, percentFromValue(snapped)) setRange(([currentMin, currentMax]) => thumb === "min" ? [snapped, currentMax] : [currentMin, snapped] ) } else { // Snap the dragged value to the step grid on release. const current = thumb === "min" ? min : max const snapped = roundValue(current, step) if (snapped !== current) { animateThumbTo(thumb, percentFromValue(snapped)) setRange(([currentMin, currentMax]) => thumb === "min" ? [snapped, currentMax] : [currentMin, snapped] ) } } if (!shouldReduceMotion && rubberStretch.get() !== 0) { animate(rubberStretch, 0, { type: "spring", visualDuration: 0.35, bounce: 0.15, }) } draggingThumb.current = null pointerDownPos.current = null setIsDragging(false) }, [ positionToValue, percentFromValue, animateThumbTo, setRange, min, max, step, absoluteMin, absoluteMax, rubberStretch, shouldReduceMotion, ] ) const discreteSteps = (absoluteMax - absoluteMin) / step const hashMarkCount = discreteSteps <= 10 ? discreteSteps - 1 : 9 const hashMarkPct = (i: number) => { return discreteSteps <= 10 ? (((i + 1) * step) / (absoluteMax - absoluteMin)) * 100 : (i + 1) * 10 } const handleKeyDown = useCallback( (thumb: Thumb) => (e: React.KeyboardEvent) => { const arrowStep = e.shiftKey ? step * 10 : step const current = thumb === "min" ? min : max const next = (() => { switch (e.key) { case "ArrowRight": case "ArrowUp": return current + arrowStep case "ArrowLeft": case "ArrowDown": return current - arrowStep case "Home": return thumb === "min" ? absoluteMin : min case "End": return thumb === "min" ? max : absoluteMax default: return null } })() if (next === null) return e.preventDefault() setKeyboardFocusThumb(thumb) const bounds: [number, number] = thumb === "min" ? [absoluteMin, max - step] : [min + step, absoluteMax] const snapped = clamp(roundValue(next, step), bounds[0], bounds[1]) animateThumbTo(thumb, percentFromValue(snapped)) setRange(([currentMin, currentMax]) => thumb === "min" ? [snapped, currentMax] : [currentMin, snapped] ) }, [ step, min, max, absoluteMin, absoluteMax, animateThumbTo, percentFromValue, setRange, ] ) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{Array.from({ length: hashMarkCount }, (_, i) => (

))}

setKeyboardFocusThumb("min")} onBlur={() => setKeyboardFocusThumb(null)} className="absolute top-1/2 h-5 w-1 -translate-y-1/2 cursor-pointer touch-none rounded-full bg-(--elastic-slider-handle) opacity-0 transition-opacity outline-none group-data-[active=true]/elastic-slider:opacity-50 data-[focus-visible=true]:opacity-80 data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring/50" style={{ left: minLeft, y: "-50%" }} /> setKeyboardFocusThumb("max")} onBlur={() => setKeyboardFocusThumb(null)} className="absolute top-1/2 h-5 w-1 -translate-y-1/2 cursor-pointer touch-none rounded-full bg-(--elastic-slider-handle) opacity-0 transition-opacity outline-none group-data-[active=true]/elastic-slider:opacity-50 data-[focus-visible=true]:opacity-80 data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring/50" style={{ left: maxLeft, y: "-50%" }} />

) } 53:Ted4,// Thanks @radix-ui import * as React from "react" // use-layout-effect.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/use-layout-effect.tsx /** * On the server, React emits a warning when calling `useLayoutEffect`. * This is because neither `useLayoutEffect` nor `useEffect` run on the server. * We use this safe version which suppresses the warning by replacing it with a noop on the server. * * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect */ const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {} // use-controllable-state.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/use-controllable-state.tsx // Prevent bundlers from trying to optimize the import const useInsertionEffect: typeof useLayoutEffect = (React as never)[" useInsertionEffect ".trim().toString()] || useLayoutEffect type ChangeHandler = (state: T) => void type SetStateFn = React.Dispatch> interface UseControllableStateParams { prop?: T | undefined defaultProp: T onChange?: ChangeHandler caller?: string } export function useControllableState({ prop, defaultProp, onChange = () => {}, caller, }: UseControllableStateParams): [T, SetStateFn] { const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({ defaultProp, onChange, }) const isControlled = prop !== undefined const value = isControlled ? prop : uncontrolledProp // OK to disable conditionally calling hooks here because they will always run // consistently in the same environment. Bundlers should be able to remove the // code block entirely in production. /* eslint-disable react-hooks/rules-of-hooks */ if (process.env.NODE_ENV !== "production") { const isControlledRef = React.useRef(prop !== undefined) React.useEffect(() => { const wasControlled = isControlledRef.current if (wasControlled !== isControlled) { const from = wasControlled ? "controlled" : "uncontrolled" const to = isControlled ? "controlled" : "uncontrolled" console.warn( `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.` ) } isControlledRef.current = isControlled }, [isControlled, caller]) } /* eslint-enable react-hooks/rules-of-hooks */ const setValue = React.useCallback>( (nextValue) => { if (isControlled) { const value = isFunction(nextValue) ? nextValue(prop) : nextValue if (value !== prop) { onChangeRef.current?.(value) } } else { setUncontrolledProp(nextValue) } }, [isControlled, prop, setUncontrolledProp, onChangeRef] ) return [value, setValue] } function useUncontrolledState({ defaultProp, onChange, }: Omit, "prop">): [ Value: T, setValue: React.Dispatch>, OnChangeRef: React.RefObject | undefined>, ] { const [value, setValue] = React.useState(defaultProp) const prevValueRef = React.useRef(value) const onChangeRef = React.useRef(onChange) useInsertionEffect(() => { onChangeRef.current = onChange }, [onChange]) React.useEffect(() => { if (prevValueRef.current !== value) { onChangeRef.current?.(value) prevValueRef.current = value } }, [value, prevValueRef]) return [value, setValue, onChangeRef] } function isFunction(value: unknown): value is (...args: never[]) => unknown { return typeof value === "function" } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils"]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.persian-labs.ir/r/elastic-range-slider.json","proxyUrl":"https://shadcnregistry.com/r/persianlabsui/elastic-range-slider","itemId":"@persianlabsui/elastic-range-slider"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/base/ui/elastic-range-slider.tsx","content":"$52","type":"registry:ui"},{"path":"registry/base/hooks/use-controllable-state.ts","content":"$53","type":"registry:hook"}]}]]}],"$L54"]}]

Elastic Range Slider

Installation

Files

components

hooks

Styles