update

frontend/src/components/NumberInput.tsx

@@ -0,0 +1,32 @@
+import React, * as React_2 from 'react';
+import {CSSProperties, FC} from 'react';
+import {Input} from '@fluentui/react-components';
+import {SliderOnChangeData} from '@fluentui/react-slider';
+
+export const NumberInput: FC<{
+  value: number,
+  min: number,
+  max: number,
+  step?: number,
+  onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
+  style?: CSSProperties
+}> = ({value, min, max, step, onChange, style}) => {
+  return (
+    <Input type="number" style={style} value={value.toString()} min={min} max={max} step={step}
+           onChange={(e, data) => {
+             onChange?.(e, {value: Number(data.value)});
+           }}
+           onBlur={(e) => {
+             if (onChange) {
+               if (step) {
+                 const offset = (min > 0 ? min : 0) - (max < 0 ? max : 0);
+                 value = Number(((
+                     Math.round((value - offset) / step) * step)
+                   + offset)
+                   .toFixed(2)); // avoid precision issues
+               }
+               onChange(e, {value: Math.max(Math.min(value, max), min)});
+             }
+           }}/>
+  );
+};

frontend/src/components/Page.tsx

@@ -0,0 +1,12 @@
+import React, {FC, ReactElement} from 'react';
+import {Divider, Text} from '@fluentui/react-components';
+
+export const Page: FC<{ title: string; content: ReactElement }> = ({title, content = true}) => {
+  return (
+    <div className="flex flex-col gap-2 p-2 h-full">
+      <Text size={600}>{title}</Text>
+      <Divider style={{flexGrow: 0}}/>
+      {content}
+    </div>
+  );
+};

frontend/src/components/ValuedSlider.tsx

@@ -0,0 +1,33 @@
+import React, * as React_2 from 'react';
+import {FC, useEffect, useRef} from 'react';
+import {Slider, Text} from '@fluentui/react-components';
+import {SliderOnChangeData} from '@fluentui/react-slider';
+import {NumberInput} from './NumberInput';
+
+export const ValuedSlider: FC<{
+  value: number,
+  min: number,
+  max: number,
+  step?: number,
+  input?: boolean
+  onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
+}> = ({value, min, max, step, input, onChange}) => {
+  const sliderRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (step && sliderRef.current && sliderRef.current.parentElement) {
+      if ((max - min) / step > 10)
+        sliderRef.current.parentElement.style.removeProperty('--fui-Slider--steps-percent');
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center">
+      <Slider ref={sliderRef} className="grow" style={{minWidth: '50%'}} value={value} min={min}
+              max={max} step={step}
+              onChange={onChange}/>
+      {input
+        ? <NumberInput style={{minWidth: 0}} value={value} min={min} max={max} step={step} onChange={onChange}/>
+        : <Text>{value}</Text>}
+    </div>
+  );
+};