diff --git a/src/RangeSlider/RangeSlider.tsx b/src/RangeSlider/RangeSlider.tsx
index f531b368e..c06bfd577 100644
--- a/src/RangeSlider/RangeSlider.tsx
+++ b/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;
diff --git a/src/Slider/Graduated.tsx b/src/Slider/Graduated.tsx
index 059a91f28..1de6580e7 100644
--- a/src/Slider/Graduated.tsx
+++ b/src/Slider/Graduated.tsx
@@ -69,7 +69,7 @@ const Graduated: RsRefForwardingComponent<'div', GraduatedProps> = React.forward
return (
-
+ {graduatedItems}
);
}
diff --git a/src/Slider/Handle.tsx b/src/Slider/Handle.tsx
index 3d61be7b4..290992eda 100644
--- a/src/Slider/Handle.tsx
+++ b/src/Slider/Handle.tsx
@@ -50,7 +50,7 @@ const Handle: RsRefForwardingComponent<'div', HandleProps> = React.forwardRef(
const rootRef = useRef();
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}
)}
-
+
{children}
);
diff --git a/src/Slider/ProgressBar.tsx b/src/Slider/ProgressBar.tsx
index be8968cb2..9d1548f8c 100644
--- a/src/Slider/ProgressBar.tsx
+++ b/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());
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
index ab1660f5b..6b2dec639 100644
--- a/src/Slider/Slider.tsx
+++ b/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;
diff --git a/src/Slider/styles/index.less b/src/Slider/styles/index.less
index 49f73e8cc..1c0e9c25b 100644
--- a/src/Slider/styles/index.less
+++ b/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;
}
}