From a69db80f23616ada2cfd751132d8da231caadf3e Mon Sep 17 00:00:00 2001
From: Valera Melnikov <valera@appsmith.com>
Date: Thu, 6 Feb 2025 11:27:21 +0300
Subject: [PATCH] chore: add slider control (#39058)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Add slider control for UQI forms.

![Снимок экрана 2025-02-06 в 10 04
22](https://github.com/user-attachments/assets/4aea28c8-5cc0-4b82-96b8-ca3645789c4b)

## Automation

/ok-to-test tags="@tag.Datasource"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13173679109>
> Commit: 2aa13620a3bb6eddd57684895f18c269437ccb7d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13173679109&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource`
> Spec:
> <hr>Thu, 06 Feb 2025 07:59:48 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced an interactive slider control for forms, allowing users to
adjust numerical values with ease.
- Enhanced form input options by integrating the slider into the
existing control suite for a smoother, more intuitive user experience.
- Added a new form control type, "SLIDER", to expand the available input
options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/formControls/BaseControl.tsx   |  1 +
 .../components/formControls/SliderControl.tsx | 47 +++++++++++++++++++
 .../utils/formControl/FormControlRegistry.tsx |  9 ++++
 .../src/utils/formControl/formControlTypes.ts |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 app/client/src/components/formControls/SliderControl.tsx

diff --git a/app/client/src/components/formControls/BaseControl.tsx b/app/client/src/components/formControls/BaseControl.tsx
index a728fdf283..50189b9e6a 100644
--- a/app/client/src/components/formControls/BaseControl.tsx
+++ b/app/client/src/components/formControls/BaseControl.tsx
@@ -87,6 +87,7 @@ export interface ControlData {
   errorText?: string;
   showError?: boolean;
   encrypted?: boolean;
+  title?: string; // used as label for control component
   subtitle?: string;
   showLineNumbers?: boolean;
   url?: string;
diff --git a/app/client/src/components/formControls/SliderControl.tsx b/app/client/src/components/formControls/SliderControl.tsx
new file mode 100644
index 0000000000..afbe92c92e
--- /dev/null
+++ b/app/client/src/components/formControls/SliderControl.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { Field, type WrappedFieldInputProps } from "redux-form";
+import BaseControl from "./BaseControl";
+import type { ControlProps } from "./BaseControl";
+import { Slider, type SliderProps } from "@appsmith/ads";
+
+export interface SliderControlProps
+  extends ControlProps,
+    Omit<SliderProps, "id" | "label"> {}
+
+export class SliderControl extends BaseControl<SliderControlProps> {
+  render() {
+    const { configProperty, ...rest } = this.props;
+
+    return (
+      <Field
+        component={renderSliderControl}
+        name={configProperty}
+        props={{ ...rest }}
+      />
+    );
+  }
+
+  getControlType(): string {
+    return "SLIDER";
+  }
+}
+
+const renderSliderControl = (
+  props: {
+    input?: WrappedFieldInputProps;
+  } & SliderControlProps,
+) => {
+  const { input, maxValue, minValue, step, title } = props;
+
+  return (
+    <Slider
+      defaultValue={input?.value}
+      // use title as label because UQI label form placed above the component witch breaks the layout
+      label={title}
+      maxValue={maxValue}
+      minValue={minValue}
+      onChangeEnd={input?.onChange}
+      step={step}
+    />
+  );
+};
diff --git a/app/client/src/utils/formControl/FormControlRegistry.tsx b/app/client/src/utils/formControl/FormControlRegistry.tsx
index ab538fe39d..391e64f159 100644
--- a/app/client/src/utils/formControl/FormControlRegistry.tsx
+++ b/app/client/src/utils/formControl/FormControlRegistry.tsx
@@ -38,6 +38,10 @@ import type { MultipleFilePickerControlProps } from "components/formControls/Mul
 import type { RadioButtonControlProps } from "components/formControls/RadioButtonControl";
 import RadioButtonControl from "components/formControls/RadioButtonControl";
 import { RagIntegrations } from "ee/components/formControls/Rag";
+import {
+  SliderControl,
+  type SliderControlProps,
+} from "components/formControls/SliderControl";
 
 /**
  * NOTE: If you are adding a component that uses FormControl
@@ -199,6 +203,11 @@ class FormControlRegistry {
         },
       },
     );
+    FormControlFactory.registerControlBuilder(formControlTypes.SLIDER, {
+      buildPropertyControl(controlProps: SliderControlProps): JSX.Element {
+        return <SliderControl {...controlProps} />;
+      },
+    });
   }
 }
 
diff --git a/app/client/src/utils/formControl/formControlTypes.ts b/app/client/src/utils/formControl/formControlTypes.ts
index 69c0f6d7ad..ee81c6d24c 100644
--- a/app/client/src/utils/formControl/formControlTypes.ts
+++ b/app/client/src/utils/formControl/formControlTypes.ts
@@ -20,4 +20,5 @@ export default {
   MULTIPLE_FILE_PICKER: "MULTIPLE_FILE_PICKER",
   RADIO_BUTTON: "RADIO_BUTTON",
   RAG_INTEGRATIONS: "RAG_INTEGRATIONS",
+  SLIDER: "SLIDER",
 };