Parameter Slider

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useLayoutEffect,
7  useMemo,
8  useRef,
9  useState,
10} from "react";
11import * as SliderPrimitive from "@radix-ui/react-slider";
12import type { ParameterSliderProps, SliderConfig, SliderValue } from "./schema";
13import { ActionButtons } from "../shared/action-buttons";
14import { normalizeActionsConfig } from "../shared/actions-config";
15import { useControllableState } from "../shared/use-controllable-state";
16import { useSignatureReset } from "../shared/use-signature-reset";
17 
18import { cn } from "./_adapter";
19import {
20  createSliderSignature,
21  createSliderValueSnapshot,
22  sliderRangeToPercent,
23} from "./math";
24 
25function formatSignedValue(
26  value: number,
27  min: number,
28  max: number,
29  precision?: number,
30  unit?: string,
31): string {
32  const crossesZero = min < 0 && max > 0;
33  const fixed =
34    precision !== undefined ? value.toFixed(precision) : String(value);
35  const numericPart = crossesZero && value >= 0 ? `+${fixed}` : fixed;
36  return unit ? `${numericPart} ${unit}` : numericPart;
37}
38 
39function getAriaValueText(
40  value: number,
41  min: number,
42  max: number,
43  unit?: string,
44): string {
45  const crossesZero = min < 0 && max > 0;
46  if (crossesZero) {
47    if (value > 0) {
48      return unit ? `plus ${value} ${unit}` : `plus ${value}`;
49    } else if (value < 0) {
50      return unit
51        ? `minus ${Math.abs(value)} ${unit}`
52        : `minus ${Math.abs(value)}`;
53    }
54  }
55  return unit ? `${value} ${unit}` : String(value);
56}
57 
58const TICK_COUNT = 16;
59const TEXT_PADDING_X = 4;
60const TEXT_PADDING_X_OUTER = 0; // Less inset on outer-facing side (near edges)
61const TEXT_PADDING_Y = 2;
62const DETECTION_MARGIN_X = 12;
63const DETECTION_MARGIN_X_OUTER = 4; // Small margin at edges for steep falloff - segments fully close at terminal positions
64const DETECTION_MARGIN_Y = 12;
65const TRACK_HEIGHT = 48;
66const TEXT_RELEASE_INSET = 8;
67const TRACK_EDGE_INSET = 4; // px from track edge - keeps elements visible at extremes
68const THUMB_WIDTH = 12; // w-3
69// Text vertical offset: raised slightly from center
70// Positive = raised, negative = lowered
71const TEXT_VERTICAL_OFFSET = 0.5;
72 
73function clampPercent(value: number): number {
74  if (!Number.isFinite(value)) return 0;
75  return Math.max(0, Math.min(100, value));
76}
77 
78// Convert a percentage (0-100) to an inset position string
79// At 0%: 4px from left edge; at 100%: 4px from right edge
80function toInsetPosition(percent: number): string {
81  const safePercent = clampPercent(percent);
82// … truncated