update

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>
+  );
+};