feat: disable inputs if peq dont use them

src/components/VerticalSlider/VerticalSlider.tsx

@@ -38,6 +38,9 @@ type VerticalSliderProps = {
 
   className?: string;
   style?: React.CSSProperties;
+
+  /** Greys out the slider and blocks all interaction. */
+  disabled?: boolean;
 };
 
 const defaultStep: StepFn = () => 0.1;
@@ -174,6 +177,7 @@ export default function VerticalSlider({
   formatValue,
   showTicks = true,
   scale = 'linear',
+  disabled = false,
   className,
   style,
 }: VerticalSliderProps) {
@@ -240,6 +244,26 @@ export default function VerticalSlider({
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (!disabled) return;
+
+    dragging.current = false;
+    keyboardEditing.current = false;
+    keyboardValue.current = null;
+    wheelEditing.current = false;
+    wheelValue.current = null;
+    if (wheelCommitTimeout.current) {
+      clearTimeout(wheelCommitTimeout.current);
+      wheelCommitTimeout.current = null;
+    }
+
+    setEditingText(null);
+    setDisplayValue(value);
+    dragValue.current = value;
+    onInput?.(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled]);
+
   const decimals = useMemo(() => {
     if (listValues) return Math.min(3, getDecimals(displayValue));
     return Math.min(3, getDecimals(step(displayValue)));
@@ -273,6 +297,8 @@ export default function VerticalSlider({
   }
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
       return;
     }
@@ -307,6 +333,8 @@ export default function VerticalSlider({
   }
 
   async function handleKeyUp() {
+    if (disabled) return;
+
     if (keyboardValue.current == null) return;
 
     const next = keyboardValue.current;
@@ -323,6 +351,7 @@ export default function VerticalSlider({
   }
 
   function handleWheel(e: WheelEvent) {
+    if (disabled) return;
     e.preventDefault();
 
     wheelEditing.current = true;
@@ -393,6 +422,8 @@ export default function VerticalSlider({
   }
 
   function startDrag(e: React.PointerEvent<HTMLDivElement>) {
+    if (disabled) return;
+
     const target = e.currentTarget;
     dragging.current = true;
     target.setPointerCapture(e.pointerId);
@@ -427,6 +458,11 @@ export default function VerticalSlider({
   }
 
   async function commitEditing() {
+    if (disabled) {
+      setEditingText(null);
+      return;
+    }
+
     if (editingText !== null && editingText !== '' && editingText !== '-') {
       const parsed = Number(editingText);
 
@@ -452,7 +488,10 @@ export default function VerticalSlider({
   const percent = valueToPercent(displayValue, min, max, scale, listValues);
 
   return (
-    <div className={['gauge-viewport', className].filter(Boolean).join(' ')} style={style}>
+    <div
+      className={['gauge-viewport', disabled && 'is-disabled', className].filter(Boolean).join(' ')}
+      style={style}
+    >
       <div
         className={['gauge-track', !showTicks && 'no-ticks'].filter(Boolean).join(' ')}
         ref={trackRef}
@@ -468,7 +507,12 @@ export default function VerticalSlider({
         <div
           className="slider"
           ref={sliderRef}
-          tabIndex={0}
+          role="slider"
+          aria-disabled={disabled}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={displayValue}
+          tabIndex={disabled ? -1 : 0}
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
           onPointerDown={startDrag}
@@ -494,6 +538,7 @@ export default function VerticalSlider({
           ref={inputRef}
           type="text"
           inputMode="decimal"
+          disabled={disabled}
           value={editingText ?? formattedValue}
           style={{ width: '100%' }}
           onFocus={() => setEditingText(value.toFixed(decimals))} // plain number while editing