From f412c8874a6aa91fa7dbca1878c27c5494cb967d Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 24 Feb 2025 11:00:21 +0000
Subject: [PATCH] feat: add JS toggle to slider component label

Co-Authored-By: vadim@appsmith.com <vadim@appsmith.com>
---
 .../ads/src/Slider/Slider.styles.tsx          |  6 ++++++
 .../design-system/ads/src/Slider/Slider.tsx   | 19 +++++++++++++++----
 .../ads/src/Slider/Slider.types.ts            |  4 ++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/Slider/Slider.styles.tsx b/app/client/packages/design-system/ads/src/Slider/Slider.styles.tsx
index 234d15c82edb..acd3d4324d8a 100644
--- a/app/client/packages/design-system/ads/src/Slider/Slider.styles.tsx
+++ b/app/client/packages/design-system/ads/src/Slider/Slider.styles.tsx
@@ -83,3 +83,9 @@ export const Track = styled.div`
   height: var(--ads-v2-spaces-4);
   width: 100%;
 `;
+
+export const LabelWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--ads-v2-spaces-3);
+`;
diff --git a/app/client/packages/design-system/ads/src/Slider/Slider.tsx b/app/client/packages/design-system/ads/src/Slider/Slider.tsx
index d8130ab51193..7743e85f18e2 100644
--- a/app/client/packages/design-system/ads/src/Slider/Slider.tsx
+++ b/app/client/packages/design-system/ads/src/Slider/Slider.tsx
@@ -6,6 +6,8 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useNumberFormatter } from "@react-aria/i18n";
 import type { AriaSliderProps } from "@react-types/slider";
 import { Text } from "../Text";
+// Removed FlexWrapper import as we're using LabelWrapper from Slider.styles.tsx
+import { ToggleComponentToJsonHandler } from "components/editorComponents/form/ToggleComponentToJson";
 import { SliderFocusVisibleClassName } from "./Slider.constants";
 import {
   StyledSlider,
@@ -15,6 +17,7 @@ import {
   FilledRail,
   Track,
   TrackContainer,
+  LabelWrapper,
 } from "./Slider.styles";
 import type { SliderProps } from "./Slider.types";
 
@@ -67,10 +70,18 @@ export function Slider(props: SliderProps) {
     <StyledSlider {...groupProps} disabled={props.isDisabled}>
       <SliderLabel>
         {props.label && (
-          // @ts-expect-error incompatible types for Text and labelProps
-          <Text renderAs="label" {...labelProps}>
-            {props.label}
-          </Text>
+          <LabelWrapper>
+            {/* @ts-expect-error incompatible types for Text and labelProps */}
+            <Text renderAs="label" {...labelProps}>
+              {props.label}
+            </Text>
+            {props.configProperty && props.formName && (
+              <ToggleComponentToJsonHandler
+                configProperty={props.configProperty}
+                formName={props.formName}
+              />
+            )}
+          </LabelWrapper>
         )}
         {/*@ts-expect-error incompatible types for Text and outputProps**/}
         <Text {...outputProps}>{getDisplayValue()}</Text>
diff --git a/app/client/packages/design-system/ads/src/Slider/Slider.types.ts b/app/client/packages/design-system/ads/src/Slider/Slider.types.ts
index 005339057904..cbb309a96643 100644
--- a/app/client/packages/design-system/ads/src/Slider/Slider.types.ts
+++ b/app/client/packages/design-system/ads/src/Slider/Slider.types.ts
@@ -8,4 +8,8 @@ export interface SliderProps
   formatOptions?: Intl.NumberFormatOptions;
   /** A function that returns the content to display as the value's label. Overrides default formatted number. */
   getValueLabel?: (value: number) => string;
+  /** Property path for JS toggle */
+  configProperty?: string;
+  /** Form name for JS toggle */
+  formName?: string;
 }