Skip to page content

滑块

QSlider 是用户指定最小值和最大值之间的数值的绝佳方式,可以设置有效值之间的可选步长。滑块还有一个焦点指示器(高亮显示的滑块按钮),允许通过键盘调整滑块。

另请查看它的"兄弟"组件 QRange

用法

WARNING

您有责任调整 QSlider 周围的空间,以便标签和标记标签不会与页面上的其他内容重叠。您可以使用 CSS margin 或 padding 来实现这一点。

标准

标准



垂直

带内部最小/最大值
v2.4+

有时您需要将模型值限制在轨道长度内的一个区间内。为此,请使用 inner-mininner-max 属性。第一个属性需要大于或等于 min 属性,而后者需要小于或等于 max 属性。

带步长

step 属性也可以是浮点数(或数字 0,如果您需要无限精度)。

带标签

在下面的示例中,移动滑块以查看标签。

下面的示例更好地突出了 QSlider 如何处理标签定位,使其始终在水平方向上保持在 QSlider 的框内。

标记点

颜色

颜色



无选择

轨道图片

轨道和滑块大小

延迟

延迟



空值

空值



反向

反向



暗色模式

只读和禁用

只读



禁用



在列表中使用

原生表单提交

无障碍访问
v2.25+

QSlider 实现了 WAI-ARIA 滑块模式:接收键盘焦点的元素暴露 role="slider" 并带有跟踪 model 数据的 aria-valuemin/aria-valuemax/aria-valuenownull 的 model 数据会报告最小值——即滑块所在位置——因为该 role 要求必须有值,此时 aria-valuetext 会说"无值"以便不被播报为真实选择)、用于垂直模式的 aria-orientation,以及适用时的 aria-disabled / aria-readonlylabel-value(例如"50%")也会成为 aria-valuetext,这样屏幕阅读器会播报与视觉用户看到的相同的格式化值。

在桌面模式下,滑块可键盘操作:方向键 步进调整值(方向遵循 RTL、reversevertical),PageUp / PageDown 跳跃 10 步,Home / End 直接到达极值。在移动平台上只接入了触摸/指针交互。

默认没有内置的无障碍名称,所以 QSlider 默认会被播报为没有标签。请传入 aria-label 属性——属性穿透到可聚焦的 role="slider" 元素上(只有 class/style 留在包裹元素上)——或自行关联一个可见的标签,以便屏幕阅读器用户知道该值控制什么。