From 8baafe438d2088bd79ef44068ff76099ffc8bbe0 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 9 May 2022 19:32:32 -0500
Subject: [PATCH] Fix options sliders not sliding

---
 src/GameOptions/ui/CurrentOptionsPage.tsx | 12 ++++++------
 src/GameOptions/ui/OptionsSlider.tsx      | 15 +++++++++++----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/GameOptions/ui/CurrentOptionsPage.tsx b/src/GameOptions/ui/CurrentOptionsPage.tsx
index ff154f768..f34245a3b 100644
--- a/src/GameOptions/ui/CurrentOptionsPage.tsx
+++ b/src/GameOptions/ui/CurrentOptionsPage.tsx
@@ -70,7 +70,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
         <>
           <OptionsSlider
             label=".script exec time (ms)"
-            value={execTime}
+            initialValue={execTime}
             callback={handleExecTimeChange}
             step={1}
             min={5}
@@ -84,7 +84,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
           />
           <OptionsSlider
             label="Recently killed scripts size"
-            value={recentScriptsSize}
+            initialValue={recentScriptsSize}
             callback={handleRecentScriptsSizeChange}
             step={25}
             min={0}
@@ -98,7 +98,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
           />
           <OptionsSlider
             label="Netscript log size"
-            value={logSize}
+            initialValue={logSize}
             callback={handleLogSizeChange}
             step={20}
             min={20}
@@ -112,7 +112,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
           />
           <OptionsSlider
             label="Netscript port size"
-            value={portSize}
+            initialValue={portSize}
             callback={handlePortSizeChange}
             step={1}
             min={20}
@@ -126,7 +126,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
           />
           <OptionsSlider
             label="Terminal capacity"
-            value={terminalSize}
+            initialValue={terminalSize}
             callback={handleTerminalSizeChange}
             step={50}
             min={50}
@@ -141,7 +141,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
           />
           <OptionsSlider
             label="Autosave interval (s)"
-            value={autosaveInterval}
+            initialValue={autosaveInterval}
             callback={handleAutosaveIntervalChange}
             step={30}
             min={0}
diff --git a/src/GameOptions/ui/OptionsSlider.tsx b/src/GameOptions/ui/OptionsSlider.tsx
index 5c0377d77..ac12d768f 100644
--- a/src/GameOptions/ui/OptionsSlider.tsx
+++ b/src/GameOptions/ui/OptionsSlider.tsx
@@ -1,8 +1,8 @@
 import { Slider, Tooltip, Typography, Box } from "@mui/material";
-import React from "react";
+import React, { useState } from "react";
 
 interface IProps {
-  value: any;
+  initialValue: any;
   callback: (event: any, newValue: number | number[]) => void;
   step: number;
   min: number;
@@ -13,14 +13,21 @@ interface IProps {
 }
 
 export const OptionsSlider = (props: IProps): React.ReactElement => {
+  const [value, setValue] = useState(props.initialValue);
+
+  const onChange = (_evt: Event, newValue: number | Array<number>): void => {
+    setValue(newValue);
+  };
+
   return (
     <Box>
       <Tooltip title={<Typography>{props.tooltip}</Typography>}>
         <Typography>{props.label}</Typography>
       </Tooltip>
       <Slider
-        value={props.value}
-        onChange={props.callback}
+        value={value}
+        onChange={onChange}
+        onChangeCommitted={(evt) => props.callback(evt, value)}
         step={props.step}
         min={props.min}
         max={props.max}