fix: 刻度计算问题，input number 样式问题

Tencent · Feb 23, 2022 · 03aa1dd · 03aa1dd
1 parent 13022c5
commit 03aa1dd
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/slider/Slider.tsx b/src/slider/Slider.tsx
@@ -55,7 +55,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
         }
         return marks.map((mark) => ({
           value: mark,
-          position: (mark - min) / max,
+          position: (mark - min) / (max - min),
           label: mark,
         }));
       }
@@ -91,6 +91,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
       return result;
     }, [max, min, step]);
 
+    if (min === -10) console.log(allDots, dots);
+
     const startDirection = isVertical ? 'bottom' : 'left';
     const stepDirection = isVertical ? 'top' : 'left';
     const sizeKey = isVertical ? 'height' : 'width';
@@ -118,14 +120,14 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
       return (
         <InputNumber
-          theme="normal"
           value={currentValue}
           onChange={(value: number) => handleInputChange(Number(value), nodeIndex)}
           className={classNames(`${classPrefix}-slider-input`, {
             'is-vertical': isVertical,
           })}
           disabled={disabled}
           {...inputProps}
+          theme="column"
         />
       );
     };
@@ -211,7 +213,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
             ></div>
             {range ? createHandleButton(LEFT_NODE, { [startDirection]: numberToPercent(start) }) : null}
             {createHandleButton(RIGHT_NODE, { [startDirection]: numberToPercent(end) })}
-            <div className={classNames(`${classPrefix}-slider__step`)}>
+            <div>
               {renderDots.map(({ position, value }) => (
                 <div
                   key={value}
@@ -241,6 +243,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
             })}
           >
             {range && createInput(LEFT_NODE)}
+            {range && <div className={`${classPrefix}-slider__center-line`}></div>}
             {createInput(RIGHT_NODE)}
           </div>
         ) : null}