Vertical Slider Orientation

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

@@ -5,12 +5,14 @@ import { UICompBuilder } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
 import { hasIcon } from "comps/utils";
+import { BoolControl } from "comps/controls/boolControl";
 
 const RangeSliderBasicComp = (function () {
   const childrenMap = {
     ...SliderChildren,
     start: numberExposingStateControl("start", 10),
     end: numberExposingStateControl("end", 60),
+    vertical: BoolControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
@@ -19,6 +21,7 @@ const RangeSliderBasicComp = (function () {
       inputFieldStyle:props.inputFieldStyle,
       children: (
         <SliderWrapper
+          vertical={props.vertical}
           onMouseDown={(e: any) => {
             e.stopPropagation();
             return false;
@@ -31,6 +34,7 @@ const RangeSliderBasicComp = (function () {
             value={[props.start.value, props.end.value]}
             $style={props.inputFieldStyle}
             style={{ margin: 0 }}
+            vertical={props.vertical || false}
             onChange={([start, end]) => {
               props.start.onChange(start);
               props.end.onChange(end);
@@ -54,6 +58,7 @@ const RangeSliderBasicComp = (function () {
               label: trans("rangeSlider.step"),
               tooltip: trans("rangeSlider.stepTooltip"),
             })}
+            {children.vertical.propertyView({ label: trans("slider.vertical") })}
           </Section>
 
           <SliderPropertyView {...children} />

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx

@@ -6,6 +6,7 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
 import { hasIcon } from "comps/utils";
+import { BoolControl } from "comps/controls/boolControl";
 
 const SliderBasicComp = (function () {
   /**
@@ -14,6 +15,7 @@ const SliderBasicComp = (function () {
   const childrenMap = {
     ...SliderChildren,
     value: numberExposingStateControl("value", 60),
+    vertical: BoolControl,
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -23,6 +25,7 @@ const SliderBasicComp = (function () {
       inputFieldStyle:props.inputFieldStyle,
       children: (
         <SliderWrapper
+          vertical={props.vertical}
           onMouseDown={(e: any) => {
             e.stopPropagation();
             return false;
@@ -34,7 +37,7 @@ const SliderBasicComp = (function () {
             value={props.value.value}
             $style={props.inputFieldStyle}
             style={{margin: 0}}
-            // FALK TODO : vertical={true}
+            vertical={props.vertical || false}
             onChange={(e) => {
               props.value.onChange(e);
               props.onEvent("change");
@@ -56,6 +59,7 @@ const SliderBasicComp = (function () {
               label: trans("slider.step"),
               tooltip: trans("slider.stepTooltip"),
             })}
+            {children.vertical.propertyView({ label: trans("slider.vertical") })}
           </Section>
           <FormDataPropertyView {...children} />
           <SliderPropertyView {...children} />

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
+import {  InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, 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";
@@ -16,7 +16,7 @@ import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const getStyle = (style: SliderStyleType) => {
+const getStyle = (style: SliderStyleType, vertical: boolean) => {
   return css`
     &.ant-slider:not(.ant-slider-disabled) {
       &,
@@ -41,16 +41,20 @@ const getStyle = (style: SliderStyleType) => {
       .ant-slider-handle:focus {
         box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
       }
+      ${vertical && css`
+        width: auto;	
+        min-height: calc(300px - ${style.margin});
+        margin: ${style.margin} auto !important;
+      `}
     }
   `;
 };
 
-export const SliderStyled = styled(Slider)<{ $style: SliderStyleType }>`
-  ${(props) => props.$style && getStyle(props.$style)}
+export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, vertical: boolean }>`
+  ${(props) => props.$style && getStyle(props.$style, props.vertical)}
 `;
 
-// Falk TODO: height: 300px;
-export const SliderWrapper = styled.div`
+export const SliderWrapper = styled.div<{ vertical: boolean }>`
   width: 100%;
   display: inline-flex;
   align-items: center;

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1642,7 +1642,8 @@ export const en = {
   },
   "slider": {
     "step": "Step",
-    "stepTooltip": "The Value Must Be Greater Than 0 and Divisible by (Max-Min)"
+    "stepTooltip": "The Value Must Be Greater Than 0 and Divisible by (Max-Min)",
+    "vertical": "Vertical Orientation",
   },
   "rating": {
     "max": "Max Rating",