Ionic 范围

Ionic range 滑动条用于通过移动滑块旋钮来选择和显示值的级别。默认情况下，只有一个旋钮控制范围的值，但它也可以接受双旋钮。

范围标签

通过将属性 slot= "start" 和 slot= "end" 添加到元素，可以将标签放置在范围的两侧。

最大值和最小值

可以使用 max 和 min 属性分别在范围中传递最大值和最小值。 默认情况下，该范围已将 min=0 和 max=0 值设置为。

步长和吸附

steps 属性用于指定范围值的粒度。 当值不是以 1 递增时，它可能很有用。 如果在范围中设置 step 属性，它将在范围中显示每个步骤的刻度线。 snap 属性用于根据 step 属性值自动将旋钮移动到最近的刻度线。

双旋钮

如果在范围组件上将 dual-knobs 属性设置为 true，它将启用范围上的两个旋钮。 这意味着该值将是一个包含两个属性的对象：lower 和 upper。

我们可以通过以下示例来理解 Ionic range。

示例

输出

向范围添加图标

图标用于清晰地显示数据。 我们可以将图标放置在范围元素两侧的范围输入之前和之后。 以下示例显示了在范围中使用图标。

示例

输出

样式范围

我们也可以使用 color 属性来设置范围的样式。 以下示例显示了 ionic range 组件中使用颜色的情况。

示例

输出