From 657d89cb98d5bb16a489e815bd168fa841ca823b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20=28Netux=29=20Rodr=C3=ADguez?=
 <send.email@netux.site>
Date: Tue, 3 Sep 2024 18:12:42 -0300
Subject: [PATCH] Fix settings number slider browser up arrow not increasing
 the value correctly when step < 1

If we keep flooring the value, but have a step of, e.g., 0.1, then we are never going to reach the next whole number value.

This applies specifically to the Audio Volume slider.
---
 website/src/repl/components/panel/SettingsTab.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index da62f6142..e326a7b3e 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { audioEngineTargets, defaultSettings, settingsMap, useSettings } from '../../../settings.mjs';
 import { themes } from '@strudel/codemirror';
 import { isUdels, setGlobalAudioVolume } from '../../util.mjs';
@@ -32,6 +33,16 @@ function SelectInput({ value, options, onChange }) {
 }
 
 function NumberSlider({ value, onChange, step = 1, ...rest }) {
+  const fractionalDigits = useMemo(() => {
+    const stepStr = step.toString();
+    const decimalPointIdx = stepStr.indexOf('.');
+    if (decimalPointIdx < 0) {
+      return 0;
+    }
+
+    return stepStr.slice(decimalPointIdx + 1).length;
+  }, [step]);
+
   return (
     <div className="flex space-x-2 gap-1">
       <input
@@ -44,7 +55,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
       />
       <input
         type="number"
-        value={Math.floor(value)}
+        value={Number(value).toFixed(fractionalDigits)}
         step={step}
         className="w-16 bg-background rounded-md"
         onChange={(e) => onChange(Number(e.target.value))}