Compare Slider

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface CompareSliderProps extends Omit<
8  React.ComponentProps<"div">,
9  "onChange"
10> {
11  /** Sits in flow and sets the size of the frame. Shown before the divider. */
12  before: React.ReactNode
13  /** Laid over the top and clipped to after the divider. */
14  after: React.ReactNode
15  /** Divider position, 0 to 100. Leave it out to let the slider own it. */
16  position?: number
17  /** Starting position when the slider owns it. */
18  defaultPosition?: number
19  /** Called with the position the divider moved to. */
20  onPositionChange?: (position: number) => void
21  /** Split left to right, or top to bottom. */
22  orientation?: "horizontal" | "vertical"
23  /** Percent moved per arrow key. Shift moves five of these. */
24  step?: number
25  /** Name for the divider, which is a real slider. */
26  label?: string
27}
28 
29const clamp = (value: number) => Math.min(Math.max(value, 0), 100)
30 
31export function CompareSlider({
32  before,
33  after,
34  position,
35  defaultPosition = 50,
36  onPositionChange,
37  orientation = "horizontal",
38  step = 2,
39  label = "Compare",
40  className,
41  style,
42  ...props
43}: CompareSliderProps) {
44  const [own, setOwn] = React.useState(defaultPosition)
45  const [dragging, setDragging] = React.useState(false)
46  const frameRef = React.useRef<HTMLDivElement>(null)
47 
48  const isControlled = position !== undefined
49  const value = clamp(isControlled ? position : own)
50  const vertical = orientation === "vertical"
51 
52  const commit = (next: number) => {
53    const clamped = clamp(next)
54    if (!isControlled) {
55      setOwn(clamped)
56    }
57    onPositionChange?.(clamped)
58  }
59 
60  const trackPointer = (event: React.PointerEvent<HTMLDivElement>) => {
61    const frame = frameRef.current
62    if (!frame) {
63      return
64    }
65    const rect = frame.getBoundingClientRect()
66    const ratio = vertical
67      ? (event.clientY - rect.top) / rect.height
68      : (event.clientX - rect.left) / rect.width
69    commit(ratio * 100)
70  }
71 
72  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
73    const distance = event.shiftKey ? step * 5 : step
74    const back = vertical ? "ArrowUp" : "ArrowLeft"
75    const forward = vertical ? "ArrowDown" : "ArrowRight"
76 
77    if (event.key === back) {
78      commit(value - distance)
79    } else if (event.key === forward) {
80      commit(value + distance)
81    } else if (event.key === "Home") {
82      commit(0)
83    } else if (event.key === "End") {
84      commit(100)
85// … truncated