0°C
26°C
37°C
100°C
diff --git a/components/slider/__tests__/__snapshots__/index.test.js.snap b/components/slider/__tests__/__snapshots__/index.test.js.snap
index c86a5e63ad0a..8b7c1eb1e711 100644
--- a/components/slider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
exports[`Slider rtl render component should be rendered correctly in RTL direction 1`] = `
`;
exports[`Slider should render in RTL direction 1`] = `
@@ -78,9 +75,6 @@ exports[`Slider should render in RTL direction 1`] = `
-
`;
diff --git a/components/slider/__tests__/index.test.js b/components/slider/__tests__/index.test.js
index 4b965e4d38e9..050d006aec1c 100644
--- a/components/slider/__tests__/index.test.js
+++ b/components/slider/__tests__/index.test.js
@@ -11,7 +11,7 @@ import { sleep } from '../../../tests/utils';
describe('Slider', () => {
mountTest(Slider);
rtlTest(Slider);
- focusTest(Slider, { refFocus: true });
+ focusTest(Slider, { testLib: true });
it('should show tooltip when hovering slider handler', () => {
const wrapper = mount(
);
@@ -51,7 +51,7 @@ describe('Slider', () => {
const wrapper = mount(
,
);
- expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 48);
+ expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('aria-valuenow', 48);
});
it('when step is not null, thumb can be slided to the multiples of step', () => {
@@ -62,7 +62,7 @@ describe('Slider', () => {
};
const wrapper = mount(
);
- expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 49);
+ expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('aria-valuenow', 49);
});
it('when step is undefined, thumb can be slided to the multiples of step', () => {
@@ -75,7 +75,7 @@ describe('Slider', () => {
const wrapper = mount(
,
);
- expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 49);
+ expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('aria-valuenow', 49);
});
it('should render in RTL direction', () => {
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index a2817e7f04ae..907354552d25 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -1,18 +1,11 @@
import * as React from 'react';
-import RcSlider, { Range as RcRange, Handle as RcHandle } from 'rc-slider';
+import RcSlider, { SliderProps as RcSliderProps } from 'rc-slider';
import classNames from 'classnames';
import { TooltipPlacement } from '../tooltip';
import SliderTooltip from './SliderTooltip';
import { ConfigContext } from '../config-provider';
-export interface SliderMarks {
- [key: number]:
- | React.ReactNode
- | {
- style: React.CSSProperties;
- label: React.ReactNode;
- };
-}
+export type SliderMarks = RcSliderProps['marks'];
interface HandleGeneratorInfo {
value?: number;
@@ -93,43 +86,6 @@ const Slider = React.forwardRef
(
return direction === 'rtl' ? 'left' : 'right';
};
- const handleWithTooltip: HandleGeneratorFn = ({
- tooltipPrefixCls,
- prefixCls,
- info: { value, dragging, index, ...restProps },
- }) => {
- const {
- tipFormatter,
- tooltipVisible,
- tooltipPlacement,
- getTooltipPopupContainer,
- vertical,
- } = props;
- const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
- const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
- const rootPrefixCls = getPrefixCls();
-
- return (
-
- toggleTooltipVisible(index, true)}
- onMouseLeave={() => toggleTooltipVisible(index, false)}
- />
-
- );
- };
-
const {
prefixCls: customizePrefixCls,
tooltipPrefixCls: customizeTooltipPrefixCls,
@@ -148,45 +104,57 @@ const Slider = React.forwardRef(
restProps.reverse = !restProps.reverse;
}
- // extrack draggableTrack from range={{ ... }}
- let draggableTrack: boolean | undefined;
- if (typeof range === 'object') {
- draggableTrack = range.draggableTrack;
- }
+ // Range config
+ const [mergedRange, draggableTrack] = React.useMemo(() => {
+ if (!range) {
+ return [false];
+ }
+
+ return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
+ }, [range]);
+
+ const handleRender: RcSliderProps['handleRender'] = (node, info) => {
+ const { index, dragging } = info;
+
+ const rootPrefixCls = getPrefixCls();
+ const { tipFormatter, tooltipVisible, tooltipPlacement, getTooltipPopupContainer, vertical } =
+ props;
+
+ const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
+ const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
+
+ const passedProps = {
+ ...node.props,
+ onMouseEnter: () => toggleTooltipVisible(index, true),
+ onMouseLeave: () => toggleTooltipVisible(index, false),
+ };
- if (range) {
return (
-
- handleWithTooltip({
- tooltipPrefixCls,
- prefixCls,
- info,
- })
- }
- prefixCls={prefixCls}
- />
+
+ {React.cloneElement(node, passedProps)}
+
);
- }
+ };
+
return (
- handleWithTooltip({
- tooltipPrefixCls,
- prefixCls,
- info,
- })
- }
prefixCls={prefixCls}
+ handleRender={handleRender}
/>
);
},
diff --git a/components/slider/style/index.less b/components/slider/style/index.less
index d5967bb08f9a..98b7685e0d69 100644
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@@ -49,9 +49,12 @@
transition: border-color 0.3s, box-shadow 0.6s,
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
- &-dragging&-dragging&-dragging {
- border-color: @slider-handle-color-focus;
- box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
+ // &-dragging&-dragging&-dragging {
+ // border-color: @slider-handle-color-focus;
+ // box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
+ // }
+ &-dragging {
+ z-index: 1;
}
&:focus {
@@ -104,6 +107,7 @@
width: 100%;
height: 4px;
background: transparent;
+ pointer-events: none;
}
&-dot {
@@ -111,20 +115,11 @@
top: -2px;
width: 8px;
height: 8px;
- margin-left: -4px;
background-color: @component-background;
border: 2px solid @slider-dot-border-color;
border-radius: 50%;
cursor: pointer;
- &:first-child {
- margin-left: -4px;
- }
-
- &:last-child {
- margin-left: -4px;
- }
-
&-active {
border-color: @slider-dot-border-color-active;
}
@@ -196,8 +191,7 @@
.@{slider-prefix-cls}-dot {
top: auto;
- left: 2px;
- margin-bottom: -4px;
+ margin-left: -2px;
}
}
diff --git a/components/slider/style/rtl.less b/components/slider/style/rtl.less
index 7dde8a9087d3..d78a54a8e0fc 100644
--- a/components/slider/style/rtl.less
+++ b/components/slider/style/rtl.less
@@ -14,27 +14,6 @@
left: auto;
}
}
-
- &-dot {
- .@{slider-prefix-cls}-rtl & {
- margin-right: -4px;
- margin-left: 0;
- }
-
- &:first-child {
- .@{slider-prefix-cls}-rtl & {
- margin-right: -4px;
- margin-left: 0;
- }
- }
-
- &:last-child {
- .@{slider-prefix-cls}-rtl & {
- margin-right: -4px;
- margin-left: 0;
- }
- }
- }
}
.vertical() {
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index e4907f8a9e75..12f9fe8a3ac7 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -321,14 +321,14 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
exports[`renders ./components/space/demo/customize.md extend context correctly 1`] = `
Array [
@@ -367,9 +367,6 @@ Array [