QRange 组件非常适合为用户提供介于最小值和最大值之间的子范围选择，并提供可选步骤来选择这些值。Range 组件的一个示例用例是提供价格范围选择。
¥The QRange component is a great way to offer the user the selection of a sub-range of values between a minimum and maximum value, with optional steps to select those values. An example use case for the Range component would be to offer a price range selection.
还要检查它的“兄弟”组件 QSlider。
¥Also check out its “sibling”, the QSlider component.
用法(Usage)
¥Usage
注意我们使用了一个对象进行选择，它保存了所选范围的下限值。 - rangeValues.min 及更高值 - rangeValues.max。
¥Notice we are using an object for the selection, which holds values for both the lower value of the selected range - rangeValues.min and the higher value - rangeValues.max.
标准式(Standard)
¥Standard
警告
你有责任调整 QRange 周围的空间，以使标签和标记标签不会与页面上的其他内容重叠。你可以使用 CSS margin 或 padding 来实现此目的。
¥You are responsible for accommodating the space around QRange so that the label and marker labels won’t overlap the other content on your page. You can use CSS margin or padding for this purpose.
垂直(Vertical)
¥Vertical
带内部最小/最大按钮 v2.4+(With inner min/max v2.4+)
¥With inner min/max
有时你需要将模型值限制在轨道长度内的某个区间内。为此，请使用 inner-min 和 inner-max 属性。第一个 prop 需要大于或等于 min prop，而后者需要小于或等于 max prop。
¥Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use inner-min and inner-max props. First prop needs to be higher or equal to min prop while the latter needs to be lower or equal to the max prop.
带步骤(With step)
¥With step
step 属性也可以是浮点数（如果需要无限精度，则为数字 0）。
¥The step property can also be a floating point number (or numeric 0 if you need infinite precision).
带标签(With label)
¥With label
在以下示例中，移动滑块即可查看标签。
¥In the example below, move the slider to see the label.
下面的示例更好地展示了 QRange 如何处理标签定位，使其始终水平保持在 QRange 的框内。
¥The example below is better highlighting how QRange handles label positioning so that it always stays inside the QRange’s box horizontally.
标记(Markers)
¥Markers
标记标签 v2.4+(Marker labels v2.4+)
¥Marker labels
关于插槽的提示
为了使用标记标签槽（见下文），你必须使用 marker-labels 属性启用它们。
¥In order to use the marker label slots (see below), you must enable them by using the marker-labels prop.
其他自定义 v2.4+(Other customizations v2.4+)
¥Other customizations
拖动范围(Dragging range)
¥Dragging range
使用 drag-range 或 drag-only-range 属性允许用户移动选定范围或整个预定范围。
¥Use the drag-range or drag-only-range props to allow the user to move the selected range or only a predetermined range as a whole.
延迟输入(Lazy input)
¥Lazy input
空值(Null values)
¥Null values
反向(Reverse)
¥Reverse
强制暗黑模式(Force dark mode)
¥Force dark mode
只读并禁用(Readonly and disable)
¥Readonly and disable
使用 QItem(With QItem)
¥With QItem
原生表单提交(Native form submit)
¥Native form submit
当处理具有 action 和 method 的原生表单时（例如，将 Quasar 与 ASP.NET 控制器结合使用时），你需要在 QRange 上指定 name 属性，否则 formData 将不会包含该属性（如果应该包含的话）：
¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QRange, otherwise formData will not contain it (if it should):