Ionic范围 _Ionic范围

本文概述

将图标添加到范围
造型范围

Ionic范围滑块用于通过移动滑块来选择和显示值的级别。默认情况下, 只有一个旋钮控制范围的值, 但它也可以接受双旋钮。
范围标签
通过将属性slot =“ start”和slot =“ end”添加到元素, 可以将标签放置在范围的两侧。
最大值和最小值
可以分别使用max和min属性在范围内传递最大值和最小值。默认情况下, 该范围已设置min = 0和max = 0值。
步骤和快照
steps属性用于指定范围值的值粒度。当值不以1为增量时, 此功能很有用。如果将step属性设置在范围内, 它将在范围内为每个步骤显示刻度线。 snap属性用于根据step属性值将旋钮自动移动到最近的刻度线。
双旋钮
【Ionic范围】如果在范围组件上将double-nobs属性设置为true, 它将启用范围上的两个旋钮。这意味着该值将是一个包含两个属性的对象：lower和upper。
我们可以从以下示例中了解Ionic范围。
例

< ion-header> < ion-toolbar> < ion-title> RangeExample < /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-list-header> Adjust Display < /ion-list-header> < ion-item> < ion-range id="dual-range" dual-knobs> < /ion-range> < /ion-item> < ion-item> < ion-range min="-200" max="200" pin="true"> < /ion-range> < /ion-item> < /ion-list> < /ion-content>

输出：

文章图片
将图标添加到范围图标用于清晰显示数据。我们可以在范围元素的两侧将图标放置在范围输入之前和之后。以下示例显示范围内图标的使用。
例

< ion-header> < ion-toolbar> < ion-title> RangeExample < /ion-title> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-list-header> Adjust Display < /ion-list-header> < ion-item> < ion-range id="dual-range" dual-knobs> < ion-icon slot="start" size="small" name="volume-high"> < /ion-icon> < ion-icon slot="end" name="volume-high"> < /ion-icon> < /ion-range> < /ion-item> < ion-item> < ion-range min="-200" max="200" pin="true"> < ion-icon slot="start" size="small" name="sunny"> < /ion-icon> < ion-icon slot="end" name="sunny"> < /ion-icon> < /ion-range> < /ion-item> < /ion-list> < /ion-content>

输出：

文章图片
造型范围我们还可以使用color属性设置范围的样式。以下示例显示了将颜色与Ionic范围分量一起使用。
例

< ion-header> < ion-toolbar color="success"> < ion-title> RangeExample < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light" fullscreen> < ion-list> < ion-list-header> Adjust Display < /ion-list-header> < ion-item> < ion-range value="http://www.srcmini.com/20"> < ion-icon slot="start" size="small" name="contrast"> < /ion-icon> < ion-icon slot="end" name="contrast"> < /ion-icon> < /ion-range> < /ion-item> < ion-item> < ion-range min="-200" max="200" pin color="secondary"> < /ion-range> < /ion-item> < ion-item> < ion-range id="dual-range" dual-knobs pin color="dark"> < /ion-range> < /ion-item> < ion-item> < ion-range min="1000" max="2000" step="100" value="http://www.srcmini.com/1400" snaps color="danger"> < ion-icon slot="start" size="small" color="danger" name="thermometer"> < /ion-icon> < ion-icon slot="end" color="danger" name="thermometer"> < /ion-icon> < /ion-range> < /ion-item> < /ion-list> < /ion-content>

输出：