为什么捐赠
API 资源管理器
范围

QRange 组件是为用户提供在最小值和最大值之间选择子范围值的一种好方法,可以选择可选的步长来选择这些值。范围组件的一个示例用例是提供价格范围选择。

还可以查看它的“兄弟”组件,QSlider

正在加载 QRange API...

用法

请注意,我们正在使用对象进行选择,该对象包含所选范围的下限值 - rangeValues.min 和上限值 - rangeValues.max

标准

警告

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

标准



垂直

垂直方向



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

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

内部最小/最大值



带步长

带步长



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

浮点数



捕捉到步长



带标签

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

带标签



始终显示标签



自定义标签值



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

长标签



标记

标记



标记标签
v2.4+

标记标签



关于插槽的提示

为了使用标记标签插槽(见下文),您必须通过使用 marker-labels 道具启用它们。

标记标签插槽



其他自定义
v2.4+

颜色自定义



隐藏选择栏



自定义轨道图像



轨道和滑块大小



拖动范围

使用 drag-rangedrag-only-range 道具允许用户移动选定的范围或仅将预定范围整体移动。

拖动范围



拖动范围 + 捕捉到步长



仅拖动范围(固定间隔)



延迟输入

延迟输入



空值

空值



反转

反向



强制暗模式

强制暗模式



只读和禁用

只读



禁用



与 QItem 一起使用

与 QItem 一起使用



原生表单提交

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

原生表单