fix(Slider,RangeSlider): reverse marks order in vertical orientation (#…

…2080)

src/RangeSlider/RangeSlider.tsx

@@ -111,7 +111,9 @@ const RangeSlider = React.forwardRef((props: RangeSliderProps, ref) => {
   const getValueByPosition = useCallback(
     (event: React.MouseEvent) => {
       const barOffset = getOffset(barRef.current);
-      const offset = vertical ? event.pageY - barOffset.top : event.pageX - barOffset.left;
+      const offset = vertical
+        ? barOffset.top + barOffset.height - event.pageY
+        : event.pageX - barOffset.left;
       const val = rtl && !vertical ? barOffset.width - offset : offset;
 
       return getValueByOffset(val) + min;

src/Slider/Graduated.tsx

@@ -69,7 +69,7 @@ const Graduated: RsRefForwardingComponent<'div', GraduatedProps> = React.forward
 
     return (
       <Component ref={ref} className={classes}>
-        <ul>{graduatedItems}</ul>
+        <ol>{graduatedItems}</ol>
       </Component>
     );
   }

src/Slider/Handle.tsx

@@ -50,7 +50,7 @@ const Handle: RsRefForwardingComponent<'div', HandleProps> = React.forwardRef(
 
     const rootRef = useRef<HTMLDivElement>();
     const horizontalKey = rtl ? 'right' : 'left';
-    const direction = vertical ? 'top' : horizontalKey;
+    const direction = vertical ? 'bottom' : horizontalKey;
     const styles = { ...style, [direction]: `${position}%` };
     const { merge, prefix } = useClassNames(classPrefix);
     const handleClasses = merge(className, prefix('handle'), { active });
@@ -146,7 +146,7 @@ const Handle: RsRefForwardingComponent<'div', HandleProps> = React.forwardRef(
             {renderTooltip ? renderTooltip(value) : value}
           </Tooltip>
         )}
-        <Input value={value} {...rest} />
+        <Input tabIndex={-1} value={value} {...rest} />
         {children}
       </Component>
     );

src/Slider/ProgressBar.tsx

@@ -27,7 +27,7 @@ const ProgressBar: RsRefForwardingComponent<'div', ProgressBarProps> = React.for
 
     const sizeKey = vertical ? 'height' : 'width';
     const dirKey = rtl ? 'right' : 'left';
-    const startKey = vertical ? 'top' : dirKey;
+    const startKey = vertical ? 'bottom' : dirKey;
 
     const styles = { ...style, [startKey]: `${start}%`, [sizeKey]: `${end - start}%` };
     const classes = merge(className, withClassPrefix());

src/Slider/Slider.tsx

@@ -193,7 +193,9 @@ const Slider = React.forwardRef((props: SliderProps, ref) => {
   const getValueByPosition = useCallback(
     (event: React.MouseEvent) => {
       const barOffset = getOffset(barRef.current);
-      const offset = vertical ? event.pageY - barOffset.top : event.pageX - barOffset.left;
+      const offset = vertical
+        ? barOffset.top + barOffset.height - event.pageY
+        : event.pageX - barOffset.left;
       const offsetValue = rtl && !vertical ? barOffset.width - offset : offset;
 
       return getValueByOffset(offsetValue) + min;

src/Slider/styles/index.less

@@ -83,9 +83,13 @@
     }
   }
 
-  .rs-slider-vertical &::before {
-    left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
-    margin-top: (-@slider-handle-diameter / 2);
+  .rs-slider-vertical & {
+    top: unset;
+
+    &::before {
+      left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
+      margin-top: (-@slider-handle-diameter / 2);
+    }
   }
 }
 
@@ -127,12 +131,12 @@
 .rs-slider-graduator {
   width: 100%;
 
-  ul,
+  ol,
   li {
     list-style: none;
   }
 
-  > ul {
+  > ol {
     display: flex;
     padding-left: 0;
     width: 100%;
@@ -157,7 +161,8 @@
 
         // Vertical styles
         .rs-slider-vertical & {
-          top: -4px;
+          top: unset;
+          bottom: -4px;
           margin-left: -1px;
         }
       }
@@ -168,8 +173,8 @@
         // Vertical styles
         .rs-slider-vertical & {
           left: 0;
-          top: auto;
-          bottom: -4px;
+          bottom: unset;
+          top: -4px;
         }
       }
 
@@ -188,10 +193,10 @@
     display: block;
     height: 100%;
 
-    > ul {
+    > ol {
       width: @slider-bar-side-length;
       display: flex;
-      flex-direction: column;
+      flex-direction: column-reverse;
       height: 100%;
       padding: 0;
 
@@ -212,7 +217,7 @@
 
   .rs-slider-vertical & {
     width: @slider-bar-side-length;
-    border-radius: (@slider-bar-side-length / 2) (@slider-bar-side-length / 2) 0 0;
+    border-radius: 0 0 (@slider-bar-side-length / 2) (@slider-bar-side-length / 2);
   }
 }
 
@@ -222,7 +227,8 @@
 
   // Reset all setting
   .rs-slider-mark {
-    top: -8px;
+    top: unset;
+    bottom: -8px;
     left: (@slider-bar-side-length + @slider-mark-margin-top);
 
     &-content {
@@ -231,7 +237,7 @@
   }
 
   .rs-slider-mark-last {
-    top: auto;
-    bottom: -8px;
+    bottom: unset;
+    top: -8px;
   }
 }