为什么捐赠
API 资源管理器
滑块

QSlider 是一个很棒的方式,可以让用户在最小值和最大值之间指定一个数值,并在有效值之间可选地设置步长。滑块还有一个焦点指示器(高亮的滑块按钮),允许对滑块进行键盘调整。

也可以查看它的“兄弟”组件:QRange

正在加载 QSlider API...

用法

警告

您负责调整 QSlider 周围的空间,以使标签和标记标签不会与页面上的其他内容重叠。您可以使用 CSS 边距或填充来实现此目的。

标准

标准



垂直

垂直方向



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

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

内部最小/最大值



带步长

带步长



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

浮点数



捕捉到步长



带标签

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

带标签



始终显示标签



自定义标签值



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

长标签



标记

标记



标记标签
v2.4+

标记标签



关于插槽的提示

要使用标记标签插槽(见下文),您必须使用 marker-labels 属性启用它们。

标记标签插槽



其他自定义
v2.4+

颜色自定义



隐藏选择条



自定义轨道图像



轨道和滑块大小



惰性输入

惰性输入



空值

空值



反转

反转



强制暗模式

强制暗模式



只读和禁用

只读



禁用



带 QItem

带 QItem



原生表单提交

当处理带有 actionmethod 的原生表单(例如,当与 ASP.NET 控制器一起使用 Quasar 时)时,您需要在 QSlider 上指定 name 属性,否则 formData 将不会包含它(如果应该包含它)。

原生表单