1
import type { ReactNode } from "react";
2
 
3
interface SliderProps {
4
  label: ReactNode;
5
  value: number;
6
  min: number;
7
  max: number;
8
  step?: number;
9
  disabled?: boolean;
10
  onChange: (value: number) => void;
11
  /** Double-click the row to reset to this value. */
12
  resetTo?: number;
13
  /** Render the numeric readout. */
14
  display?: (value: number) => string;
15
}
16
 
17
export function Slider({
18
  label,
19
  value,
20
  min,
21
  max,
22
  step = 1,
23
  disabled = false,
24
  onChange,
25
  resetTo,
26
  display,
27
}: SliderProps) {
28
  return (
29
    <div className="mb-3.5 last:mb-0" onDoubleClick={() => resetTo !== undefined && !disabled && onChange(resetTo)}>
30
      <div className="mb-1.5 flex items-center justify-between text-xs">
31
        <span className="text-zinc-400">{label}</span>
32
        <span className="font-mono tabular-nums text-zinc-100">{display ? display(value) : value}</span>
33
      </div>
34
      <input
35
        type="range"
36
        min={min}
37
        max={max}
38
        step={step}
39
        value={value}
40
        disabled={disabled}
41
        onChange={(e) => onChange(Number(e.target.value))}
42
      />
43
    </div>
44
  );
45
}