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",
 };