✨ feat: Add SliderWithInput component

This commit introduces a new component called "SliderWithInput" which renders a slider and an input number field. It imports the "InputNumber" and "Slider" components from the Ant Design library. The component accepts props such as "step", "value", "onChange", "max", "min", and "defaultValue". It also includes a callback function called "handleOnChange" that validates input before calling the "onChange" function.

Changes:
- Added SliderWithInput component
- Imported InputNumber and Slider components
- Defined props for SliderWithInput component
- Implemented handleOnChange callback function

src/pages/setting/SliderWithInput/index.tsx

@@ -1,30 +1,36 @@
 import { InputNumber, Slider } from 'antd';
 import { SliderSingleProps } from 'antd/es/slider';
-import { memo } from 'react';
+import { isNull } from 'lodash-es';
+import { memo, useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 const SliderWithInput = memo<SliderSingleProps>(
   ({ step, value, onChange, max, min, defaultValue, ...props }) => {
+    const handleOnchange = useCallback((value: number | null) => {
+      if (Number.isNaN(value) || isNull(value)) return;
+      onChange?.(value);
+    }, []);
+
     return (
       <Flexbox direction={'horizontal'} gap={8}>
         <Slider
           defaultValue={defaultValue}
           max={max}
           min={min}
-          onChange={onChange}
+          onChange={handleOnchange}
           step={step}
           style={{ flex: 1 }}
-          value={value}
+          value={typeof value === 'number' ? value : 0}
           {...props}
         />
         <InputNumber
           defaultValue={defaultValue}
           max={max}
           min={min}
-          onChange={onChange as any}
+          onChange={handleOnchange}
           step={Number(step)}
           style={{ flex: 1, maxWidth: 64 }}
-          value={value}
+          value={typeof value === 'number' ? value : 0}
         />
       </Flexbox>
     );