From 6dac28354c1ff6b0bd6cd8dfc47dcf5051d3af66 Mon Sep 17 00:00:00 2001
From: Rishikesh Anand <rishi1998@gmail.com>
Date: Wed, 16 Oct 2024 16:18:56 -0700
Subject: [PATCH] fix: Add a numeric text field to slider input for fine tune
 adjustments

---
 src/components/inputs/accent-range.tsx | 35 +++++++++++++++++---------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/inputs/accent-range.tsx b/src/components/inputs/accent-range.tsx
index 15fa1084..b0bbb2d2 100644
--- a/src/components/inputs/accent-range.tsx
+++ b/src/components/inputs/accent-range.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, {useState} from 'react';
 import styled from 'styled-components';
+import {NumberInput} from 'src/components/panes/configure-panes/submenus/macros/keycode-sequence-components';
 
 const Container = styled.span`
-  display: inline-block;
+  display: flex;
+  gap: 10px;
+  align-items: space-between;
   line-height: initial;
   width: 200px;
 `;
@@ -16,13 +19,21 @@ export const AccentRange: React.FC<
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
     onChange: (x: number) => void;
   }
-> = (props) => (
-  <Container>
-    <SliderInput
-      {...props}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange && props.onChange(+e.target.value);
-      }}
-    />
-  </Container>
-);
+> = (props) => {
+  const [value, setValue] = useState<number>(
+    (props.defaultValue as number) || 0,
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = +e.target.value;
+    setValue(newValue);
+    props.onChange && props.onChange(newValue);
+  };
+
+  return (
+    <Container>
+      <SliderInput {...props} value={value} onChange={handleChange} />
+      <NumberInput {...props} value={value} onChange={handleChange} />
+    </Container>
+  );
+};