antd 垂直方向 Slider 的完整实现与使用指南从 demo 到源码【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design垂直方向的 Slider滑动输入条在音量调节、温度范围选择、长度设置等上下取值类交互场景中十分常见。本指南以 ant-design 仓库中 vertical demo 为起点系统讲解垂直 Slider 的配置方式、vertical与orientation属性的优先级规则、布局尺寸约束、Tooltip 定位逻辑以及底层样式与测试对实现原理的印证帮助你快速在业务中落地可直接运行的垂直滑块组件。理解官方 vertical demo一个 demo 三种形态ant-design 的组件文档采用xxx.md说明xxx.tsx代码演示的组织方式。vertical.md 本身只有两句话中文描述为垂直方向的 Slider英文描述为 The vertical Slider。其真正的技术内容沉淀在同目录的 vertical.tsx 中它一次性演示了垂直 Slider 的三种典型用法单个数值滑块Slider vertical defaultValue{30} /双滑块范围选择Slider vertical range step{10} defaultValue{[20, 50]} /带刻度标签的范围选择Slider vertical range marks{marks} defaultValue{[26, 37]} /。import React from react; import { Slider } from antd; import type { SliderSingleProps } from antd; const style: React.CSSProperties { display: inline-block, height: 300, marginInlineStart: 70, }; const marks: SliderSingleProps[marks] { 0: 0°C, 26: 26°C, 37: 37°C, 100: { style: { color: #f50 }, label: strong100°C/strong, }, }; const App: React.FC () ( div style{style} Slider vertical defaultValue{30} / /div div style{style} Slider vertical range step{10} defaultValue{[20, 50]} / /div div style{style} Slider vertical range marks{marks} defaultValue{[26, 37]} / /div / ); export default App;三个滑块彼此独立并排展示恰好覆盖了单值、区间值、带标记三种最常用的垂直形态可以直接复制到项目中按需裁剪。关键点一让 Slider 垂直需要设置哪些属性从 API 上看Slider 有两条通向垂直的路径二者在 index.zh-CN.md 的参数表中均有说明属性说明类型默认值vertical值为 true 时Slider 为垂直方向。与orientation同时存在以orientation优先booleanfalseorientation排列方向horizontal|verticalhorizontal其中vertical是早期就存在的布尔开关orientation是更通用化的方向枚举。官方文档明确给出结论当两者同时传入时以orientation为准。vertical demo 走的是最简写法——只传vertical一个布尔值。源码中的方向合并逻辑这一优先级规则并非只写在文档里而是有实打实的源码支撑。ant-design 在 index.tsx 中调用仓库自带的useOrientationhook 完成方向归一化const [, mergedVertical] useOrientation(orientation, vertical);该 hook 定义于 components/_util/hooks/useOrientation.ts合并规则如下若传入了合法horizontal或vertical的orientation则以它为最终方向否则若vertical为布尔值则按其真假映射为vertical/horizontal若两者都未明确给出则回退到默认的horizontal。const validOrientation isValidOrientation(orientation); if (validOrientation) { mergedOrientation orientation; } else if (typeof vertical boolean) { mergedOrientation vertical ? vertical : horizontal; } else { // fallback 到 legacyDirection 或 horizontal }归一化后的布尔结果mergedVertical会作为vertical属性透传给底层的rc-component/slider见 index.tsx同时被用作根容器类名与 Tooltip 定位的判断依据。仓库的单元测试也覆盖了这两种传参形态见 components/slider/tests/index.test.tsx 的 orientation attribute 分组verticaltrue且orientationhorizontal时最终渲染出.ant-slider-horizontal容器仅传orientationvertical、不传vertical时最终渲染出.ant-slider-vertical容器。建议写法使用vertical布尔值语义直观兼容性最好适合代码迁移场景使用orientationvertical推荐用于新代码未来如需把方向数据做成可配置项更自然避免同时传两个属性制造歧义除非你有意让orientation覆盖来自 Context 或旧代码的vertical。关键点二垂直布局的尺寸约束——为什么 demo 要手动包一层 div垂直 Slider 与水平 Slider 最大的不同在于布局水平轨道需要宽度垂直轨道需要高度。ant-design 的垂直样式要求容器先给出确定高度滑块才能立起来。在 components/slider/style/index.ts 的genVerticalStyle中可以看到[${componentCls}-vertical]: { ...genDirectionStyle(token, false), height: 100%, },即.ant-slider-vertical根节点的高度为100%因此它必须位于一个拥有明确高度非 auto的父容器内否则无法撑开轨道。这正是 demo 中每个滑块都被包在div style{style}里的原因——父 div 用height: 300给出固定高度再通过display: inline-block让三个滑块能够水平并排展示const style: React.CSSProperties { display: inline-block, // 使多个滑块可横向排布 height: 300, // 为 height:100% 的 .ant-slider-vertical 提供基准高度 marginInlineStart: 70, // 给首尾滑块让出 Tooltip 与刻度标签的空间 };对应的类名规则同样体现在样式中垂直形态下组件会生成.ant-slider-vertical类配合语义化的.ant-slider-rail滑轨、.ant-slider-track已选轨道、.ant-slider-handle手柄、.ant-slider-dot刻度点结构示例中的marginInlineStart: 70则用来避免滑块与页面边缘紧贴而显得拥挤。两个实际开发中的注意点务必给父容器高度否则渲染出来可能是一条看不见/压扁的滑轨。常见做法是height: 300、height: 100%依赖更上层布局或height: calc(...)垂直轨道与水平轨道边距不同样式里-vertical使用了margin: ${unit(marginFull)} ${unit(marginPart)}style/index.ts其中marginFull与marginPart由 token 计算得到纵向留白通常大于横向因此在页面中为垂直 Slider 预留的间距应比水平形态更宽裕一些。关键点三range step marks 的垂直组合玩法vertical demo 的第二、第三个滑块展示了与方向无关、但实际使用频率很高的进阶配置组合。区间滑块range与步长stepSlider vertical range step{10} defaultValue{[20, 50]} /range切换为双滑块双拇指模式此时value/defaultValue使用[number, number]数组onChange与onChangeComplete的回调参数也相应变为数组类型定义见 index.tsx 中的SliderRangePropsstep步长取值必须大于 0 且能被(max - min)整除。设置step{10}后手柄只能落在 0、10、20……这类整十点上适合只允许粗粒度取值的场景若在存在marks时希望只能选标记点官方文档建议将step设为null此时可选值只剩marks、min与max。刻度标记marksconst marks: SliderSingleProps[marks] { 0: 0°C, 26: 26°C, 37: 37°C, 100: { style: { color: #f50 }, label: strong100°C/strong, }, };marks的 key 必须是number且处于闭区间[min, max]默认min0、max100。每个标记支持两种写法简写数值: ReactNode如26: 26°C对象写法数值: { style, label }可单独定制该标记的样式与渲染内容如对100使用橙色#f50与加粗标签strong100°C/strong用于突出高温危险区。垂直滑块配合marks时标记会沿竖直方向排列在轨道一侧由于 vertical demo 将defaultValue设为[26, 37]恰好覆盖了正常体温区间是一个贴合语义的可读示例。与方向正交的扩展能力从 index.zh-CN.md 可知以下属性对水平/垂直形态一视同仁可在垂直 Slider 上直接叠加reverse反向坐标轴demo 见 reverse.tsxtooltip控制提示浮层见 show-tooltip.tsxdisabled、dots、keyboard键盘方向键操作5.2.0 支持onChange/onChangeComplete拖拽过程与松手/按键结束时的回调。关键点四垂直形态下的 Tooltip 定位逻辑垂直 Slider 的手柄在拖拽或聚焦时会弹出 Tooltip 显示当前值。它的默认出现方位与水平形态不同水平滑块默认显示在顶部top垂直滑块则默认显示在手柄的右侧left/right之外的第三方向且在 RTL 环境下自动翻转到左侧。这一逻辑实现在 index.tsx 的getTooltipPlacement中const getTooltipPlacement (placement?: TooltipPlacement, vert?: boolean) { if (placement) { return placement; // 显式指定 placement 时优先 } if (!vert) { return top; // 水平默认上方 } return isRTL ? left : right; // 垂直默认右侧RTL 下为左侧 };也就是说如果不传tooltip.placement垂直 Slider 的数值提示会出现在手柄右侧避免与竖起的轨道重叠若你的弹层与页面边缘空间不足可通过tooltip{{ placement: left }}之类的方式显式指定。仓库测试 components/slider/tests/index.test.tsx 中也有针对Slider vertical defaultValue{30} tooltip{{ placement: left }} /的用例验证显式placement会按预期生效。此外tooltip.formatter可自定义 Tooltip 内容返回null时隐藏 Tooltiptooltip.open可强制常显或常隐见 show-tooltip.tsx。在业务代码中落地一份垂直温度选择器示例把 demo 的三个滑块拆解提炼可以得到一个最小可运行的垂直温度选择组件综合了vertical、range、step、marks与事件回调import React from react; import { Slider } from antd; const App: React.FC () { return ( div style{{ height: 300, padding: 0 16px }} Slider vertical range step{5} marks{{ 0: 0°C, 50: 50°C, 100: { style: { color: #f50 }, label: strong100°C/strong } }} defaultValue{[20, 50]} onChange{(value) console.log(dragging:, value)} onChangeComplete{(value) console.log(done:, value)} / /div ); }; export default App;使用前提与约束再强调一遍外层容器必须有确定高度方向类属性建议只传vertical或只传orientationverticalstep需能被(max - min)整除需要仅选标记点时将其置为null即可。延伸阅读单滑块基本用法见 basic.tsx更完整的参数与tooltip、range子配置表见 Slider 中文文档 与 Slider English Doc带输入框联动的滑块可参考 input-number.tsx适合需要精确输入的垂直场景反向刻度、范围拖拽、多点组合等与方向可叠加的能力分别见 reverse.tsx、draggableTrack.tsx 与 multiple.tsx若需深入源码方向合并逻辑在 useOrientation.tsTooltip 定位与 RTL 处理在 index.tsx垂直样式在 style/index.ts。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 antd 垂直方向 Slider 的完整实现与使用指南：从 demo 到源码
antd 垂直方向 Slider 的完整实现与使用指南从 demo 到源码【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design垂直方向的 Slider滑动输入条在音量调节、温度范围选择、长度设置等上下取值类交互场景中十分常见。本指南以 ant-design 仓库中 vertical demo 为起点系统讲解垂直 Slider 的配置方式、vertical与orientation属性的优先级规则、布局尺寸约束、Tooltip 定位逻辑以及底层样式与测试对实现原理的印证帮助你快速在业务中落地可直接运行的垂直滑块组件。理解官方 vertical demo一个 demo 三种形态ant-design 的组件文档采用xxx.md说明xxx.tsx代码演示的组织方式。vertical.md 本身只有两句话中文描述为垂直方向的 Slider英文描述为 The vertical Slider。其真正的技术内容沉淀在同目录的 vertical.tsx 中它一次性演示了垂直 Slider 的三种典型用法单个数值滑块Slider vertical defaultValue{30} /双滑块范围选择Slider vertical range step{10} defaultValue{[20, 50]} /带刻度标签的范围选择Slider vertical range marks{marks} defaultValue{[26, 37]} /。import React from react; import { Slider } from antd; import type { SliderSingleProps } from antd; const style: React.CSSProperties { display: inline-block, height: 300, marginInlineStart: 70, }; const marks: SliderSingleProps[marks] { 0: 0°C, 26: 26°C, 37: 37°C, 100: { style: { color: #f50 }, label: strong100°C/strong, }, }; const App: React.FC () ( div style{style} Slider vertical defaultValue{30} / /div div style{style} Slider vertical range step{10} defaultValue{[20, 50]} / /div div style{style} Slider vertical range marks{marks} defaultValue{[26, 37]} / /div / ); export default App;三个滑块彼此独立并排展示恰好覆盖了单值、区间值、带标记三种最常用的垂直形态可以直接复制到项目中按需裁剪。关键点一让 Slider 垂直需要设置哪些属性从 API 上看Slider 有两条通向垂直的路径二者在 index.zh-CN.md 的参数表中均有说明属性说明类型默认值vertical值为 true 时Slider 为垂直方向。与orientation同时存在以orientation优先booleanfalseorientation排列方向horizontal|verticalhorizontal其中vertical是早期就存在的布尔开关orientation是更通用化的方向枚举。官方文档明确给出结论当两者同时传入时以orientation为准。vertical demo 走的是最简写法——只传vertical一个布尔值。源码中的方向合并逻辑这一优先级规则并非只写在文档里而是有实打实的源码支撑。ant-design 在 index.tsx 中调用仓库自带的useOrientationhook 完成方向归一化const [, mergedVertical] useOrientation(orientation, vertical);该 hook 定义于 components/_util/hooks/useOrientation.ts合并规则如下若传入了合法horizontal或vertical的orientation则以它为最终方向否则若vertical为布尔值则按其真假映射为vertical/horizontal若两者都未明确给出则回退到默认的horizontal。const validOrientation isValidOrientation(orientation); if (validOrientation) { mergedOrientation orientation; } else if (typeof vertical boolean) { mergedOrientation vertical ? vertical : horizontal; } else { // fallback 到 legacyDirection 或 horizontal }归一化后的布尔结果mergedVertical会作为vertical属性透传给底层的rc-component/slider见 index.tsx同时被用作根容器类名与 Tooltip 定位的判断依据。仓库的单元测试也覆盖了这两种传参形态见 components/slider/tests/index.test.tsx 的 orientation attribute 分组verticaltrue且orientationhorizontal时最终渲染出.ant-slider-horizontal容器仅传orientationvertical、不传vertical时最终渲染出.ant-slider-vertical容器。建议写法使用vertical布尔值语义直观兼容性最好适合代码迁移场景使用orientationvertical推荐用于新代码未来如需把方向数据做成可配置项更自然避免同时传两个属性制造歧义除非你有意让orientation覆盖来自 Context 或旧代码的vertical。关键点二垂直布局的尺寸约束——为什么 demo 要手动包一层 div垂直 Slider 与水平 Slider 最大的不同在于布局水平轨道需要宽度垂直轨道需要高度。ant-design 的垂直样式要求容器先给出确定高度滑块才能立起来。在 components/slider/style/index.ts 的genVerticalStyle中可以看到[${componentCls}-vertical]: { ...genDirectionStyle(token, false), height: 100%, },即.ant-slider-vertical根节点的高度为100%因此它必须位于一个拥有明确高度非 auto的父容器内否则无法撑开轨道。这正是 demo 中每个滑块都被包在div style{style}里的原因——父 div 用height: 300给出固定高度再通过display: inline-block让三个滑块能够水平并排展示const style: React.CSSProperties { display: inline-block, // 使多个滑块可横向排布 height: 300, // 为 height:100% 的 .ant-slider-vertical 提供基准高度 marginInlineStart: 70, // 给首尾滑块让出 Tooltip 与刻度标签的空间 };对应的类名规则同样体现在样式中垂直形态下组件会生成.ant-slider-vertical类配合语义化的.ant-slider-rail滑轨、.ant-slider-track已选轨道、.ant-slider-handle手柄、.ant-slider-dot刻度点结构示例中的marginInlineStart: 70则用来避免滑块与页面边缘紧贴而显得拥挤。两个实际开发中的注意点务必给父容器高度否则渲染出来可能是一条看不见/压扁的滑轨。常见做法是height: 300、height: 100%依赖更上层布局或height: calc(...)垂直轨道与水平轨道边距不同样式里-vertical使用了margin: ${unit(marginFull)} ${unit(marginPart)}style/index.ts其中marginFull与marginPart由 token 计算得到纵向留白通常大于横向因此在页面中为垂直 Slider 预留的间距应比水平形态更宽裕一些。关键点三range step marks 的垂直组合玩法vertical demo 的第二、第三个滑块展示了与方向无关、但实际使用频率很高的进阶配置组合。区间滑块range与步长stepSlider vertical range step{10} defaultValue{[20, 50]} /range切换为双滑块双拇指模式此时value/defaultValue使用[number, number]数组onChange与onChangeComplete的回调参数也相应变为数组类型定义见 index.tsx 中的SliderRangePropsstep步长取值必须大于 0 且能被(max - min)整除。设置step{10}后手柄只能落在 0、10、20……这类整十点上适合只允许粗粒度取值的场景若在存在marks时希望只能选标记点官方文档建议将step设为null此时可选值只剩marks、min与max。刻度标记marksconst marks: SliderSingleProps[marks] { 0: 0°C, 26: 26°C, 37: 37°C, 100: { style: { color: #f50 }, label: strong100°C/strong, }, };marks的 key 必须是number且处于闭区间[min, max]默认min0、max100。每个标记支持两种写法简写数值: ReactNode如26: 26°C对象写法数值: { style, label }可单独定制该标记的样式与渲染内容如对100使用橙色#f50与加粗标签strong100°C/strong用于突出高温危险区。垂直滑块配合marks时标记会沿竖直方向排列在轨道一侧由于 vertical demo 将defaultValue设为[26, 37]恰好覆盖了正常体温区间是一个贴合语义的可读示例。与方向正交的扩展能力从 index.zh-CN.md 可知以下属性对水平/垂直形态一视同仁可在垂直 Slider 上直接叠加reverse反向坐标轴demo 见 reverse.tsxtooltip控制提示浮层见 show-tooltip.tsxdisabled、dots、keyboard键盘方向键操作5.2.0 支持onChange/onChangeComplete拖拽过程与松手/按键结束时的回调。关键点四垂直形态下的 Tooltip 定位逻辑垂直 Slider 的手柄在拖拽或聚焦时会弹出 Tooltip 显示当前值。它的默认出现方位与水平形态不同水平滑块默认显示在顶部top垂直滑块则默认显示在手柄的右侧left/right之外的第三方向且在 RTL 环境下自动翻转到左侧。这一逻辑实现在 index.tsx 的getTooltipPlacement中const getTooltipPlacement (placement?: TooltipPlacement, vert?: boolean) { if (placement) { return placement; // 显式指定 placement 时优先 } if (!vert) { return top; // 水平默认上方 } return isRTL ? left : right; // 垂直默认右侧RTL 下为左侧 };也就是说如果不传tooltip.placement垂直 Slider 的数值提示会出现在手柄右侧避免与竖起的轨道重叠若你的弹层与页面边缘空间不足可通过tooltip{{ placement: left }}之类的方式显式指定。仓库测试 components/slider/tests/index.test.tsx 中也有针对Slider vertical defaultValue{30} tooltip{{ placement: left }} /的用例验证显式placement会按预期生效。此外tooltip.formatter可自定义 Tooltip 内容返回null时隐藏 Tooltiptooltip.open可强制常显或常隐见 show-tooltip.tsx。在业务代码中落地一份垂直温度选择器示例把 demo 的三个滑块拆解提炼可以得到一个最小可运行的垂直温度选择组件综合了vertical、range、step、marks与事件回调import React from react; import { Slider } from antd; const App: React.FC () { return ( div style{{ height: 300, padding: 0 16px }} Slider vertical range step{5} marks{{ 0: 0°C, 50: 50°C, 100: { style: { color: #f50 }, label: strong100°C/strong } }} defaultValue{[20, 50]} onChange{(value) console.log(dragging:, value)} onChangeComplete{(value) console.log(done:, value)} / /div ); }; export default App;使用前提与约束再强调一遍外层容器必须有确定高度方向类属性建议只传vertical或只传orientationverticalstep需能被(max - min)整除需要仅选标记点时将其置为null即可。延伸阅读单滑块基本用法见 basic.tsx更完整的参数与tooltip、range子配置表见 Slider 中文文档 与 Slider English Doc带输入框联动的滑块可参考 input-number.tsx适合需要精确输入的垂直场景反向刻度、范围拖拽、多点组合等与方向可叠加的能力分别见 reverse.tsx、draggableTrack.tsx 与 multiple.tsx若需深入源码方向合并逻辑在 useOrientation.tsTooltip 定位与 RTL 处理在 index.tsx垂直样式在 style/index.ts。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考