滑块

滑块允许用户在范围内选择一个或多个值。

安装

以上命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。

导入

用法

禁用

尺寸

圆角

颜色

垂直滑块

可以通过使用 orientation="vertical" 属性来更改滑块的方向。

带可见步长

您可以使用 showSteps 属性在每个步长上显示小圆点。

带标记

您可以使用 marks 属性在每个步长上显示标签。

范围滑块

如果将值数组传递给 value 属性或 defaultValue 属性，则滑块将变为范围滑块。

填充偏移

fillOffset 属性允许您设置填充应该从哪里开始。

带工具提示

showTooltip 属性允许您在用户悬停或拖动滑块时显示带有当前滑块值的工具提示。

注意： 您可以通过将 tooltipProps 传递给 Slider 组件来更改任何工具提示属性。

带轮廓

可以通过传递 showOutline 属性为滑块的滑块添加一个小轮廓。

开始和结束内容

滑块组件提供 startContent 和 endContent 属性，允许您向滑块的开始和结束位置添加任何 ReactNode。

值格式化

默认情况下，值以百分比形式格式化，但是可以使用 formatOptions 属性指定不同的格式来修改此设置。 formatOptions 与 Intl.NumberFormat 的选项参数兼容，并根据当前区域设置应用。

注意： 使用 tooltipValueFormatOptions 属性格式化工具提示值。

也可以使用 getValue 属性格式化该值。

隐藏值

默认情况下会显示滑块值，但可以通过传递 hideValue 属性将其隐藏。

隐藏滑块

默认情况下会显示滑块，但可以通过传递 hideThumb 属性将其隐藏。

受控

您可以通过传递 value 和 onChange 属性来控制滑块。

如果您只想在用户停止拖动滑块时捕获滑块值，可以使用 onChangeEnd 属性。

受控范围

您还可以通过在 value 和 onChange 属性中使用值数组来控制范围滑块。

自定义滑块

滑块组件提供了一个 renderThumb 属性，允许您以任何您想要的方式自定义滑块。

自定义范围滑块

您还可以使用 renderThumb 属性来自定义范围滑块的滑块。 index 属性将告诉您正在渲染哪个滑块。

自定义标签

滑块组件提供了一个 renderLabel 属性，允许您以任何您想要的方式自定义标签。

自定义值

滑块组件提供了一个 renderValue 属性，允许你自定义值标签元素。

禁用滑块缩放

如果你想禁用滑块的缩放动画，你可以传递 disableThumbScale 属性。

插槽

• base：基础插槽，包含所有其他插槽和元素。它作为主要容器。
• labelWrapper：滑块的标签和值的容器。它对齐这些元素并确保一致的布局。
• label：用于显示滑块标签的专用插槽。
• value：显示滑块的当前值。位于 labelWrapper 内。
• step：表示滑块上的单个步骤或间隔。
• mark：表示滑块上的特定值或间隔。
• trackWrapper：滑块轨道的容器，确保其始终对齐并定位。
• track：滑块的基本条，滑块在其上移动。
• filler：所选值的可视化表示，从起始点到当前滑块位置填充轨道。
• thumb：用户沿轨道拖动以在滑块上选择值的交互式元素。
• startContent：滑块开头附加内容或图标的插槽。
• endContent：滑块末尾附加内容或图标的插槽。

自定义样式

你可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 Slider 组件。

数据属性

Slider 具有以下属性

• data-hover：当滑块被悬停时。基于 useHover
• data-orientation：滑块的方向。基于 orientation 属性。

Thumbs 具有以下属性，这些属性由 renderThumb 属性返回

• data-dragging：当滑块被拖动时。
• data-focus-visible：当滑块被聚焦时。基于 useFocusVisible
• data-hover：当滑块被悬停时。基于 useHover
• data-pressed：当滑块被按下时。基于 usePress

辅助功能

• 支持一个或多个滑块。
• 通过 useMove 钩子支持鼠标、触摸和键盘操作。
• 支持多点触控，可同时拖动多个滑块或多个滑块。
• 在轨道上按下会将最近的滑块移动到该位置。
• 支持使用箭头键，以及 Page Up/Down、Home 和 End 键。
• 支持水平和垂直方向。
• 支持自定义最小值、最大值和步长值，并处理舍入误差。
• 支持禁用整个滑块或单个滑块。
• 防止拖动时选择文本。
• 通过 ARIA 作为一组滑块元素暴露给辅助技术。
• 滑块使用隐藏的本机输入元素来支持触摸屏阅读器。
• 支持标记整个滑块和单个滑块。
• 支持使用 <output> 元素显示当前滑块值。
• 国际化的数字格式化为百分比或值。
• 支持 RTL 语言环境中的镜像。

API

滑块属性

滑块函数

滑块事件

类型

滑块值

滑块步进标记