chore: slider to change width and height in image

src/components/seal-form/config/components.ts

@@ -1,6 +1,7 @@
-import { Checkbox, Slider } from 'antd';
+import { Checkbox } from 'antd';
 import SealInput from '../seal-input';
 import SealSelect from '../seal-select';
+import Slider from '../seal-slider';
 
 const components: {
   InputNumber: typeof SealInput.Number;

src/components/seal-form/field-component.tsx

@@ -3,6 +3,7 @@ import { useIntl } from '@umijs/max';
 import React, { useCallback, useMemo } from 'react';
 import LabelInfo from './components/label-info';
 import componentsMap from './config/components';
+
 const FieldComponent: React.FC<ParamsSchema> = (props) => {
   const intl = useIntl();
   const { type, label, attrs, style, value, ...rest } = props;

src/components/seal-form/seal-slider.tsx

@@ -0,0 +1,114 @@
+import { INPUT_WIDTH } from '@/constants';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import {
+  Form,
+  InputNumber,
+  Slider,
+  Tooltip,
+  type SliderSingleProps
+} from 'antd';
+import React from 'react';
+import FieldWrapper from './field-wrapper';
+import SliderStyles from './styles/slider.less';
+
+interface SealSliderProps extends SliderSingleProps {
+  required?: boolean;
+  label?: React.ReactNode;
+  labelWidth?: number | string;
+  description?: string;
+  isInFormItems?: boolean;
+  inputnumber?: boolean;
+  checkStatus?: 'success' | 'error' | 'warning' | '';
+}
+
+const SealSlider: React.FC<SealSliderProps> = (props) => {
+  const {
+    label,
+    value,
+    required,
+    description,
+    isInFormItems = true,
+    max,
+    min,
+    step,
+    defaultValue,
+    checkStatus,
+    inputnumber = false,
+    labelWidth,
+    tooltip = { open: false },
+    ...rest
+  } = props;
+
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  const handleChange = (value: number) => {
+    props.onChange?.(value);
+  };
+
+  const handleInput = (value: number | null) => {
+    const newValue = value || 0;
+    props.onChange?.(newValue);
+  };
+
+  const renderLabel = React.useMemo(() => {
+    return (
+      <span
+        className={SliderStyles['slider-label']}
+        style={{ width: labelWidth || INPUT_WIDTH.mini }}
+      >
+        <span className="text">
+          {description ? (
+            <Tooltip title={description}>
+              <span> {label}</span>
+              <span className="m-l-5">
+                <InfoCircleOutlined />
+              </span>
+            </Tooltip>
+          ) : (
+            <span>{label}</span>
+          )}
+        </span>
+
+        {inputnumber ? (
+          <InputNumber
+            className="label-val"
+            variant="outlined"
+            size="small"
+            value={value}
+            controls={false}
+            onChange={handleInput}
+          ></InputNumber>
+        ) : (
+          <span className="val">{value}</span>
+        )}
+      </span>
+    );
+  }, [label, labelWidth, description, value, max, min, step, defaultValue]);
+  return (
+    <FieldWrapper
+      required={required}
+      status={checkStatus || status}
+      label={renderLabel}
+      style={{ padding: '20px 2px 0' }}
+      variant="borderless"
+    >
+      <Slider
+        {...rest}
+        defaultValue={defaultValue}
+        max={max}
+        min={min}
+        step={step}
+        style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
+        tooltip={tooltip}
+        value={value}
+        onChange={handleChange}
+      ></Slider>
+    </FieldWrapper>
+  );
+};
+
+export default SealSlider;

src/components/seal-form/styles/slider.less

@@ -0,0 +1,24 @@
+:local(.slider-label) {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+
+  :global(.val) {
+    color: var(--ant-color-text);
+  }
+
+  :global(.label-val) {
+    position: absolute !important;
+    top: -14px;
+    right: -14px;
+    width: 80px;
+    border-radius: var(--border-radius-base);
+    text-align: center;
+    border: 1px solid var(--ant-color-border) !important;
+
+    :global(.ant-input-number-input) {
+      text-align: center !important;
+    }
+  }
+}