1 files changed, 56 insertions, 16 deletions
diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx
index 1fd0e78..2c50be1 100644
--- a/src/components/FpsMultiplierControl.tsx
+++ b/src/components/FpsMultiplierControl.tsx
@@ -1,4 +1,4 @@
-import { Focusable, PanelSectionRow, SliderField } from "@decky/ui";
+import { DialogButton, Focusable, PanelSectionRow } from "@decky/ui";
 import { useEffect, useRef } from "react";
 import { ConfigurationData } from "../config/configSchema";
 import { MULTIPLIER } from "../config/generatedConfigSchema";
@@ -31,23 +31,63 @@ export function FpsMultiplierControl({
     return () => cancelAnimationFrame(frame);
   }, [autoFocus, onAutoFocus]);
 
-  const multiplierLabel = config.multiplier === 1
-    ? t("MULTIPLIER_OFF", "Off")
-    : `${config.multiplier}x`;
-
   return (
     <PanelSectionRow>
-      <Focusable ref={focusableRef} noFocusRing>
-        <SliderField
-          label={`FPS multiplier · ${multiplierLabel}`}
-          value={config.multiplier}
-          min={1}
-          max={4}
-          step={1}
-          notchCount={4}
-          showValue={false}
-          onChange={(value) => void onConfigChange(MULTIPLIER, value)}
-        />
+      <Focusable
+        ref={focusableRef}
+        noFocusRing
+        style={{
+          marginTop: "6px",
+          marginBottom: "6px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+        flow-children="horizontal"
+      >
+        <DialogButton
+          style={{
+            marginLeft: "0px",
+            height: "30px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "5px 0px 0px 0px",
+            minWidth: "40px",
+          }}
+          onClick={() => void onConfigChange(MULTIPLIER, Math.max(1, config.multiplier - 1))}
+          disabled={config.multiplier <= 1}
+        >
+          −
+        </DialogButton>
+        <div
+          style={{
+            marginLeft: "20px",
+            marginRight: "20px",
+            fontSize: "16px",
+            fontWeight: "bold",
+            color: config.multiplier > 4 ? "red" : "white",
+            minWidth: "60px",
+            textAlign: "center",
+          }}
+        >
+          {config.multiplier < 2 ? t("MULTIPLIER_OFF", "OFF") : `${config.multiplier}X`}
+        </div>
+        <DialogButton
+          style={{
+            marginLeft: "0px",
+            height: "30px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "5px 0px 0px 0px",
+            minWidth: "40px",
+          }}
+          onClick={() => void onConfigChange(MULTIPLIER, Math.min(4, config.multiplier + 1))}
+          disabled={config.multiplier >= 4}
+        >
+          +
+        </DialogButton>
       </Focusable>
     </PanelSectionRow>
   );