add disable styles slider

lowcoder-org · raheeliftikhar5 · Jul 1, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
commit 3f516ab8b0004704dc75fd10a6f4dc15f26efa1d
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -46,6 +46,7 @@ const SliderBasicComp = (function () {
             {...props}
             value={props.value.value}
             $style={props.inputFieldStyle}
+            $disabledStyle={props.disabledSliderStyle}
             style={{margin: 0}}
             $vertical={Boolean(props.vertical) || false}
             tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, lightenColor, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import {  AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator  } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, DisabledSliderStyle, DisabledSliderStyleType, heightCalculator, widthCalculator  } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
@@ -15,7 +15,7 @@ import { trans } from "i18n";
 import { memo, useCallback, useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const getStyle = (style: SliderStyleType, vertical: boolean) => {
+const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: DisabledSliderStyleType) => {
   return css`
     &.ant-slider:not(.ant-slider-disabled) {
       &,
@@ -56,11 +56,35 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
         margin: ${style.margin} auto !important;
       `}
     }
+
+    /* Disabled state styling */
+    &.ant-slider-disabled {
+      .ant-slider-rail {
+        background-color: ${disabledStyle?.disabledTrack || lightenColor(style.track, 0.2)} !important;
+      }
+      .ant-slider-track {
+        background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important;
+      }
+      .ant-slider-handle {
+        background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important;
+        border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important;
+        cursor: not-allowed !important;
+      }
+      ${vertical && css`
+        width: auto;	
+        min-height: calc(300px - ${style.margin});
+        margin: ${style.margin} auto !important;
+      `}
+    }
   `;
 };
 
-export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, $vertical: boolean }>`
-  ${(props) => props.$style && getStyle(props.$style, props.$vertical)}
+export const SliderStyled = styled(Slider)<{ 
+  $style: SliderStyleType, 
+  $vertical: boolean,
+  $disabledStyle?: DisabledSliderStyleType 
+}>`
+  ${(props) => props.$style && getStyle(props.$style, props.$vertical, props.$disabledStyle)}
 `;
 
 export const SliderWrapper = styled.div<{ $vertical: boolean }>`
@@ -88,6 +112,7 @@ export const SliderChildren = {
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'),
+  disabledSliderStyle: styleControl(DisabledSliderStyle, 'disabledSliderStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle')
 };
 
@@ -132,6 +157,9 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp<ty
       <Section name={sectionNames.inputFieldStyle}>
         {children.inputFieldStyle.getPropertyView()}
       </Section>
+      <Section name={"Disabled Slider Style"}>
+        {children.disabledSliderStyle.getPropertyView()}
+      </Section>
       <Section name={sectionNames.animationStyle} hasTooltip={true}>
         {children.animationStyle.getPropertyView()}
       </Section>

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1004,6 +1004,43 @@ export const DISABLED_INPUT_STYLE_FIELDS = [
   DISABLED_INPUT_TEXT,
 ] as const;
 
+// Add disabled style constants specifically for slider components
+const DISABLED_SLIDER_FILL = {
+  name: "disabledFill",
+  label: trans("style.disabledFill"),
+  depName: "fill",
+  transformer: (color: string) => lightenColor(color, 0.3),
+} as const;
+
+const DISABLED_SLIDER_TRACK = {
+  name: "disabledTrack",
+  label: trans("style.disabledTrack"),
+  depName: "track",
+  transformer: (color: string) => lightenColor(color, 0.2),
+} as const;
+
+const DISABLED_SLIDER_THUMB = {
+  name: "disabledThumb",
+  label: trans("style.disabledThumb"),
+  depName: "thumb",
+  transformer: (color: string) => lightenColor(color, 0.25),
+} as const;
+
+const DISABLED_SLIDER_THUMB_BORDER = {
+  name: "disabledThumbBorder",
+  label: trans("style.disabledThumbBorder"),
+  depName: "thumbBorder",
+  transformer: (color: string) => lightenColor(color, 0.25),
+} as const;
+
+// Re-export for reuse in slider components
+export const DISABLED_SLIDER_STYLE_FIELDS = [
+  DISABLED_SLIDER_FILL,
+  DISABLED_SLIDER_TRACK,
+  DISABLED_SLIDER_THUMB,
+  DISABLED_SLIDER_THUMB_BORDER,
+] as const;
+
 export const ButtonStyle = [
   getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE,
@@ -1267,6 +1304,11 @@ export const SliderStyle = [
   PADDING,
 ] as const;
 
+// Create separate disabled style control for sliders
+export const DisabledSliderStyle = [
+  ...DISABLED_SLIDER_STYLE_FIELDS,
+] as const;
+
 export const InputLikeStyle = [
   getStaticBackground(SURFACE_COLOR),
   BOXSHADOW,
@@ -2362,6 +2404,7 @@ export type ContainerFooterStyleType = StyleConfigType<
   typeof ContainerFooterStyle
 >;
 export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
+export type DisabledSliderStyleType = StyleConfigType<typeof DisabledSliderStyle>;
 export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
 export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
 export type SelectStyleType = StyleConfigType<typeof SelectStyle>;