QRange 组件允许用户在最小值和最大值之间选择一个子范围的值，还可以通过可选的步骤来选择这些值。Range 组件的一个示例用例是提供价格范围选择。
也看看它的"兄弟"组件：QSlider。
QRange API
用法
请注意，我们使用一个对象来存储选择的值，该对象包含选定范围的最小值 rangeValues.min 和最大值 rangeValues.max。
标准用法
您需要调整 QRange 周围的空间，以便标签和标记标签不会与页面上的其他内容重叠。您可以为此使用 CSS 边距或填充。
垂直方向
内部最小/最大值 v2.4+
有时您需要将模型值限制为轨迹长度内的范围。为此，请使用 inner-min 和 inner-max 属性。第一个属性需要大于或等于 min 属性，而后者需要小于或等于 max 属性。
范围宽度限制 v2.26+
使用 min-range 和 max-range 属性来约束选区的宽度（model 数据中 max 和 min 的差值）。可以想象为选择一个事件的时长：至少 15 分钟，但可以放在一小时内的任何位置。
违反这些限制的外部 model 值会被强制修正（与 inner-min/inner-max 的行为方式相同），以 model 数据的 min 作为锚点。如果两个属性冲突，min-range 优先。
带步长
step 属性也可以是一个浮点数（或者数字 0 如果您需要无限精度）。
带标签
在下面的示例中，移动滑块以查看标签。
下面的示例更好地展示了 QRange 如何处理标签定位，使其始终水平地保持在 QRange 的框内。
标记
标记标签 v2.4+
要使用标记标签插槽（见下文），您必须通过 marker-labels 属性启用它们。
其他自定义选项 v2.4+
拖拽范围
使用 drag-range 或 drag-only-range 属性允许用户移动所选范围或仅移动预定的范围。
懒加载输入
空值
反向
强制暗色模式
只读和禁用
搭配 QItem
原生表单提交
当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QRange 声明 name 属性，否则表单数据中不会包含它（如果应该包含的话）：
提交的值包含最小值和最大值，以竖线分隔（min|max）。
无障碍 v2.25+
QRange 遵循 WAI-ARIA 多滑块模式：每个滑块是独立的 role="slider" 元素，暴露 aria-valuemin/aria-valuemax/aria-valuenow（每个滑块的限制跟随另一个，反映值之间的相互约束），aria-orientation 和 aria-disabled/aria-readonly，包裹在 role="group" 容器中。滑块通过 Quasar 语言包 命名为"最小值"/“最大值”（label.minimum/label.maximum）——可通过 left-thumb-aria-label/right-thumb-aria-label 属性逐实例覆盖。left-label-value/right-label-value（例如"20%"）也会成为滑块的 aria-valuetext，让屏幕阅读器通告与视觉用户看到的相同的格式化值。model 数据为 null 的滑块停留在其限制位置但通报本地化的"无值"作为 aria-valuetext，因此未触碰的范围不会被通告为完整选择。
键盘行为与 QSlider 一致：Tab 依次到达每个滑块，Arrow 键步进当前聚焦的滑块（感知 RTL/reverse/vertical），PageUp/PageDown 跳 10 步，Home/End 直接到达聚焦滑块的限制值（桌面模式下）。
使用 drag-range 时，轨道容器是额外的 Tab 停靠点，按键移动整个选区窗口并保持宽度不变；使用 drag-only-range 时它是唯一的停靠点，因此滑块语义（本地化的"范围"名称、最小值作为 aria-valuenow、两个格式化值作为 aria-valuetext）移到它上面而非滑块上。