From b5d4feb217b77891d0ea2492003bfc9b76895168 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 20 Jan 2025 18:18:10 +0530
Subject: [PATCH 1/7] Add numerical input next to the slider and handle value
 1-10

---
 .../src/formbuilder/objectform/baseform.tsx   | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index fbd24e623..ada62ad2d 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -168,25 +168,50 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
       if (k === 'opacity') {
         uiSchema[k] = {
           'ui:field': (props: any) => {
-            const handleChange = (event: CustomEvent) => {
+            const handleSliderChange = (event: CustomEvent) => {
               const target = event.target as any;
               if (target && '_value' in target) {
-                const value = parseFloat(target._value);
-                props.onChange(value);
+                const sliderValue = parseFloat(target._value); // Slider value is in 0–10 range
+                const normalizedValue = sliderValue / 10; // Normalize to 0.1–1 range
+                props.onChange(normalizedValue);
+              }
+            };
+
+            const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+              const inputValue = parseFloat(event.target.value);
+              if (!isNaN(inputValue) && inputValue >= 0.1 && inputValue <= 1) {
+                props.onChange(inputValue);
               }
             };
 
             return (
-              <Slider
-                min={0.1}
-                max={1}
-                step={0.1}
-                value={props.formData * 10}
-                onChange={handleChange}
-              >
-                <SliderLabel position="0">0%</SliderLabel>
-                <SliderLabel position="100">100%</SliderLabel>
-              </Slider>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <Slider
+                  min={1}
+                  max={10}
+                  step={1}
+                  value={props.formData * 10}
+                  onChange={handleSliderChange}
+                >
+                  <SliderLabel position="1">10%</SliderLabel>
+                  <SliderLabel position="10">100%</SliderLabel>
+                </Slider>
+                <input
+                  type="number"
+                  min="0.1"
+                  max="1"
+                  step="0.1"
+                  value={props.formData.toFixed(1)}
+                  onChange={handleInputChange}
+                  style={{
+                    width: '50px',
+                    textAlign: 'center',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    padding: '4px',
+                  }}
+                />
+              </div>
             );
           }
         };

From 6415de5febb48705c2fa469b9e9a8186a1eb099a Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 20 Jan 2025 18:51:15 +0530
Subject: [PATCH 2/7] use react hook to sync values

---
 .../src/formbuilder/objectform/baseform.tsx   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index ada62ad2d..cbf29551d 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -168,6 +168,12 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
       if (k === 'opacity') {
         uiSchema[k] = {
           'ui:field': (props: any) => {
+            const [inputValue, setInputValue] = React.useState(props.formData.toFixed(1));
+
+            React.useEffect(() => {
+              setInputValue(props.formData.toFixed(1));
+            }, [props.formData]);
+      
             const handleSliderChange = (event: CustomEvent) => {
               const target = event.target as any;
               if (target && '_value' in target) {
@@ -178,9 +184,12 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
             };
 
             const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-              const inputValue = parseFloat(event.target.value);
-              if (!isNaN(inputValue) && inputValue >= 0.1 && inputValue <= 1) {
-                props.onChange(inputValue);
+              const value = event.target.value;
+              setInputValue(value); // Update local inputValue state immediately for user feedback
+
+              const parsedValue = parseFloat(value);
+              if (!isNaN(parsedValue)) {
+                props.onChange(parsedValue);
               }
             };
 
@@ -198,10 +207,7 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
                 </Slider>
                 <input
                   type="number"
-                  min="0.1"
-                  max="1"
-                  step="0.1"
-                  value={props.formData.toFixed(1)}
+                  value={inputValue}
                   onChange={handleInputChange}
                   style={{
                     width: '50px',

From 352e5ee79dc45ba391efa5f70981bea9c26f06c3 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 20 Jan 2025 19:46:55 +0530
Subject: [PATCH 3/7] min max

---
 packages/base/src/formbuilder/objectform/baseform.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index cbf29551d..2f7a38abe 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -173,7 +173,7 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
             React.useEffect(() => {
               setInputValue(props.formData.toFixed(1));
             }, [props.formData]);
-      
+
             const handleSliderChange = (event: CustomEvent) => {
               const target = event.target as any;
               if (target && '_value' in target) {
@@ -185,10 +185,10 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
 
             const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
               const value = event.target.value;
-              setInputValue(value); // Update local inputValue state immediately for user feedback
+              setInputValue(value);
 
               const parsedValue = parseFloat(value);
-              if (!isNaN(parsedValue)) {
+              if (!isNaN(parsedValue) && parsedValue >= 0.1 && parsedValue <= 1) {
                 props.onChange(parsedValue);
               }
             };
@@ -208,6 +208,9 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
                 <input
                   type="number"
                   value={inputValue}
+                  step={0.1}
+                  min={0.1}
+                  max={1}
                   onChange={handleInputChange}
                   style={{
                     width: '50px',

From f37a09c487eb8cccbdc69b097c69d999d702a2e7 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 20 Jan 2025 19:49:40 +0530
Subject: [PATCH 4/7] lint

---
 .../src/formbuilder/objectform/baseform.tsx   | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index 0d660d272..ea8bbac2f 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -173,7 +173,9 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
       if (k === 'opacity') {
         uiSchema[k] = {
           'ui:field': (props: any) => {
-            const [inputValue, setInputValue] = React.useState(props.formData.toFixed(1));
+            const [inputValue, setInputValue] = React.useState(
+              props.formData.toFixed(1)
+            );
 
             React.useEffect(() => {
               setInputValue(props.formData.toFixed(1));
@@ -188,18 +190,26 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
               }
             };
 
-            const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            const handleInputChange = (
+              event: React.ChangeEvent<HTMLInputElement>
+            ) => {
               const value = event.target.value;
               setInputValue(value);
 
               const parsedValue = parseFloat(value);
-              if (!isNaN(parsedValue) && parsedValue >= 0.1 && parsedValue <= 1) {
+              if (
+                !isNaN(parsedValue) &&
+                parsedValue >= 0.1 &&
+                parsedValue <= 1
+              ) {
                 props.onChange(parsedValue);
               }
             };
 
             return (
-              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+              >
                 <Slider
                   min={1}
                   max={10}
@@ -222,7 +232,7 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
                     textAlign: 'center',
                     border: '1px solid #ccc',
                     borderRadius: '4px',
-                    padding: '4px',
+                    padding: '4px'
                   }}
                 />
               </div>

From 1951b462cd3be7e9a16bf75d2595a62ad2500978 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 20 Jan 2025 20:02:32 +0530
Subject: [PATCH 5/7] Remove slider labels

---
 packages/base/src/formbuilder/objectform/baseform.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index ea8bbac2f..12eea2298 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -7,7 +7,7 @@ import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
 import { deepCopy } from '../../tools';
 import { IDict } from '../../types';
-import { Slider, SliderLabel } from '@jupyter/react-components';
+import { Slider } from '@jupyter/react-components';
 import { SourceType } from '@jupytergis/schema';
 
 export interface IBaseFormStates {
@@ -217,8 +217,6 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
                   value={props.formData * 10}
                   onChange={handleSliderChange}
                 >
-                  <SliderLabel position="1">10%</SliderLabel>
-                  <SliderLabel position="10">100%</SliderLabel>
                 </Slider>
                 <input
                   type="number"

From 5756b41de134bd677c2d9690977c02d3379ea187 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 20 Jan 2025 22:51:25 +0530
Subject: [PATCH 6/7] lint

---
 packages/base/src/formbuilder/objectform/baseform.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index 12eea2298..cb59d0107 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -216,8 +216,7 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
                   step={1}
                   value={props.formData * 10}
                   onChange={handleSliderChange}
-                >
-                </Slider>
+                ></Slider>
                 <input
                   type="number"
                   value={inputValue}

From 1a8a5b7c022b76287ddd1e968e0ef9b3356af210 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Tue, 21 Jan 2025 14:40:49 +0530
Subject: [PATCH 7/7] Align input box to the slider

---
 packages/base/src/formbuilder/objectform/baseform.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index cb59d0107..fa27e4fee 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -229,7 +229,8 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
                     textAlign: 'center',
                     border: '1px solid #ccc',
                     borderRadius: '4px',
-                    padding: '4px'
+                    padding: '4px',
+                    marginBottom: '5px'
                   }}
                 />
               </div>