@mirror-physics/fractal-ui 0.2.0-next.72 → 0.2.0-next.73

package/dist/index.cjs

@@ -940,6 +940,21 @@ function Slider(props) {
       clamp(nextUpper, nextLower, max)
     ]);
   };
+  const getKeyboardValue = (event, value) => {
+    const pageStep = step * 10;
+    const adjustments = {
+      ArrowDown: -step,
+      ArrowLeft: -step,
+      ArrowRight: step,
+      ArrowUp: step,
+      PageDown: -pageStep,
+      PageUp: pageStep
+    };
+    if (event.key === "Home") return min;
+    if (event.key === "End") return max;
+    if (!(event.key in adjustments)) return null;
+    return value + adjustments[event.key];
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
@@ -974,6 +989,13 @@ function Slider(props) {
                     if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
                     else changeSingleValue(nextValue);
                   },
+                  onKeyDown: (event) => {
+                    const nextValue = getKeyboardValue(event, firstValue);
+                    if (nextValue === null) return;
+                    event.preventDefault();
+                    if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
+                    else changeSingleValue(nextValue);
+                  },
                   step,
                   type: "range",
                   value: firstValue
@@ -990,6 +1012,12 @@ function Slider(props) {
                     const nextValue = event.currentTarget.valueAsNumber;
                     changeRangeValue(firstValue, Math.max(nextValue, firstValue));
                   },
+                  onKeyDown: (event) => {
+                    const nextValue = getKeyboardValue(event, secondValue);
+                    if (nextValue === null) return;
+                    event.preventDefault();
+                    changeRangeValue(firstValue, Math.max(nextValue, firstValue));
+                  },
                   step,
                   type: "range",
                   value: secondValue