为什么捐赠
API 浏览器
联系站长
范围选择器

QRange 组件允许用户在最小值和最大值之间选择一个子范围的值,还可以通过可选的步骤来选择这些值。Range 组件的一个示例用例是提供价格范围选择。

也看看它的"兄弟"组件:QSlider

QRange API

正在加载 QRange API...

用法

请注意,我们使用一个对象来存储选择的值,该对象包含选定范围的最小值 rangeValues.min 和最大值 rangeValues.max

标准用法

WARNING

您需要调整 QRange 周围的空间,以便标签和标记标签不会与页面上的其他内容重叠。您可以为此使用 CSS 边距或填充。

标准用法



垂直方向

垂直方向



内部最小/最大值
v2.4+

有时您需要将模型值限制为轨迹长度内的范围。为此,请使用 inner-mininner-max 属性。第一个属性需要大于或等于 min 属性,而后者需要小于或等于 max 属性。

内部最小/最大值



带步长

带步长



step 属性也可以是一个浮点数(或者数字 0 如果您需要无限精度)。

浮点数



对齐到步长



带标签

在下面的示例中,移动滑块以查看标签。

带标签



始终显示标签



自定义标签值



下面的示例更好地展示了 QRange 如何处理标签定位,使其始终水平地保持在 QRange 的框内。

长标签



标记

标记



标记标签
v2.4+

标记标签



关于插槽的提示

要使用标记标签插槽(见下文),您必须通过 marker-labels 属性启用它们。

标记标签插槽



其他自定义选项
v2.4+

颜色自定义



隐藏选择栏



自定义轨道图像



轨道和滑块大小



拖拽范围

使用 drag-rangedrag-only-range 属性允许用户移动所选范围或仅移动预定的范围。

拖拽范围



拖拽范围 + 对齐到步长



仅拖拽范围(固定间隔)



懒加载输入

懒加载输入



空值

空值



反向

反向



强制暗色模式

强制暗色模式



只读和禁用

只读



禁用



搭配 QItem

搭配 QItem



原生表单提交

当处理一个带有 actionmethod 的原生表单时(如:使用 Quasar 和 ASP.NET 控制器时),您需要为 QRange 声明 name 属性,否则表单数据中不会包含它(如果应该包含的话):

原生表单