Merge pull request #3642 from nickofolas/fix/options-sliders

OPTIONS: Fix sliders not sliding correctly
This commit is contained in:
hydroflame 2022-05-13 11:02:51 -04:00 committed by GitHub
commit 23ac3d6288
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 10 deletions

@ -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}

@ -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={props.callback}
step={props.step}
min={props.min}
max={props.max}