Loom Slider

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface LoomSliderProps extends Omit<
8  React.ComponentProps<"div">,
9  "onChange" | "defaultValue"
10> {
11  /** The current value. Leave it out to let the slider own it. */
12  value?: number
13  /** Starting value when the slider owns it. */
14  defaultValue?: number
15  /** Called with the value the slider moved to. */
16  onValueChange?: (value: number) => void
17  /** Low end of the range. */
18  min?: number
19  /** High end of the range. */
20  max?: number
21  /** Smallest movement the value can make. */
22  step?: number
23  /** How many dashes are strung across the track. */
24  tickCount?: number
25  /** How many dashes either side of the value the rise reaches across. */
26  reach?: number
27  /** Show the value above the dash it belongs to. */
28  showValue?: boolean
29  /** Turns the value into the text shown above the track. */
30  formatValue?: (value: number) => string
31  /** Name for the slider. */
32  label?: string
33  /** Render at the current value, but refuse input. */
34  disabled?: boolean
35}
36 
37/**
38 * Dash lengths as a share of the track's height, measured from its middle. The
39 * row is close to even on purpose: the rise only has to say where the value is,
40 * and a dash that towers over its neighbours turns the track into a chart.
41 */
42const BASE_LENGTH = 30
43const PEAK_LENGTH = 36
44const WAVE_LENGTH = 8
45 
46const clamp = (value: number, min: number, max: number) =>
47  Math.min(Math.max(value, min), max)
48 
49/** Nearest step from `min`, so a range like 0 to 7 in 0.5s never lands off-grid. */
50function snap(value: number, min: number, max: number, step: number) {
51  if (step <= 0) return clamp(value, min, max)
52  return clamp(min + Math.round((value - min) / step) * step, min, max)
53}
54 
55/**
56 * A bell centred on the value: 1 at the dash being held, 0 once `reach` dashes
57 * away. Cosine rather than linear, so the rise has no corner at either end.
58 */
59function bell(distance: number, reach: number) {
60  if (distance >= reach) return 0
61  return (1 + Math.cos((distance / reach) * Math.PI)) / 2
62}
63 
64interface Motion {
65  /** Where the value is now, on its way to the target. */
66  value: number
67  /** Units per millisecond, which is how hard the wave is driven. */
68  velocity: number
69  /** Milliseconds the slider has been in motion, used as the wave's phase. */
70  elapsed: number
71}
72 
73/**
74 * Every dash is drawn from this each frame. A CSS transition restarted on every
75// … truncated