QRange组件是一种向用户提供选择最小值和最大值之间的子范围值的好方法，并带有可选的步骤来选择这些值。 范围组件的示例用例是提供价格范围选择。
也检阅其“兄弟”，即QSlider组件。
QRange API
用法
请注意，我们正在使用一个对象进行选择，该对象同时包含所选范围的较低值-rangeValues.min和较高值-rangeValues.max的值。
标准
WARNING
您有责任在QSlider周围留出空间，使标签和标记标签不会与您页面上的其他内容重叠。您可以使用CSS margin或padding来达到这个目的。
垂直
内部最小值/最大值 v1.17+
有时你需要将模型值限制在轨道长度内的一个区间。为此，使用inner-min和inner-max属性。第一个属性需要高于或等于min属性，而后者则需要低于或等于max属性。
带步数
step属性也可以是浮点数（如果需要无限精度，也可以是数字0）。
带标签
在下面的示例中，移动滑块以查看标签。
下面的示例更好地强调了QRange如何处理标签定位，以便它始终水平地保持在QRange的框内。
里程碑
标记标签 v1.17+
关于插槽的提示
要使用标记标签插槽（见下文），必须使用marker-labels属性启用它们。
其他定制 v1.17+
拖动范围
用drag-range或drag-only-range属性允许用户移动所选范围或整体上仅移动预定范围。
延迟输入
空值
反转 v1.5+
暗色、只读、禁用
使用QItem
本地表单提交 v1.9+
当处理具有action和method的原生形式时（例如，使用Quasar和ASP.NET控制器），则需要在QRange上指定name属性，否则formData将不包含它（如果应该的话）：