QRange 组件是为用户提供在最小值和最大值之间选择子范围值的一种好方法,可以选择可选的步长来选择这些值。范围组件的一个示例用例是提供价格范围选择。
还可以查看它的“兄弟”组件,QSlider。
用法
请注意,我们正在使用对象进行选择,该对象包含所选范围的下限值 - rangeValues.min
和上限值 - rangeValues.max
。
标准
警告
您负责调整 QRange 周围的空间,以使标签和标记标签不会与页面上的其他内容重叠。您可以为此目的使用 CSS 边距或填充。
垂直
带内部最小/最大值v2.4+
有时您需要将模型值限制在轨道长度内的区间内。为此,请使用 inner-min
和 inner-max
道具。第一个道具需要大于或等于 min
道具,而第二个道具需要小于或等于 max
道具。
带步长
step
属性也可以是浮点数(如果您需要无限精度,则可以是数字 0
)。
带标签
在下面的示例中,移动滑块以查看标签。
下面的示例更好地突出了 QRange 如何处理标签定位,使其始终水平保持在 QRange 的框内。
标记
标记标签v2.4+
关于插槽的提示
为了使用标记标签插槽(见下文),您必须通过使用 marker-labels
道具启用它们。
其他自定义v2.4+
拖动范围
使用 drag-range
或 drag-only-range
道具允许用户移动选定的范围或仅将预定范围整体移动。
延迟输入
空值
反转
强制暗模式
只读和禁用
与 QItem 一起使用
原生表单提交
当处理具有 action
和 method
的原生表单时(例如,当将 Quasar 与 ASP.NET 控制器一起使用时),您需要在 QRange 上指定 name
属性,否则 formData 将不包含它(如果应该包含)。