QRange 组件允许用户在最小值和最大值之间选择一个子范围的值,还可以通过可选的步骤来选择这些值。Range 组件的一个示例用例是提供价格范围选择。
也看看它的"兄弟"组件:QSlider。
QRange API
用法
请注意,我们使用一个对象来存储选择的值,该对象包含选定范围的最小值 rangeValues.min 和最大值 rangeValues.max。
标准用法
WARNING
您需要调整 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 属性,否则表单数据中不会包含它(如果应该包含的话):