离子 - 范围

离子范围用于选择和显示某物的水平。它将代表与最大值和最小值相关的实际值。Ionic 提供了一种使用 Range 的简单方法。

使用范围

Range 用作内部 item 元素。使用的类是range。我们将把这个类放在项目类之后。这将准备一个放置范围的容器。创建容器后，我们需要添加输入并为其分配范围类型和名称属性。

<div class = "item range">
   <input type = "range" name = "range1">
</div>

上面的代码将产生以下屏幕 -

离子范围

添加图标

范围通常需要图标来清楚地显示数据。我们只需要在范围输入之前和之后添加图标，将它们放置在范围元素的两侧。

<div class = "item range">
   <i class = "icon ion-volume-low"></i>
   <input type = "range" name = "volume">
   <i class = "icon ion-volume-high"></i>
</div>

上面的代码将产生以下屏幕 -

离子范围图标

造型范围

我们的下一个示例将向您展示如何使用 Ionic 颜色设置 Range 样式。颜色类将使用范围前缀。我们将创建一个包含九个范围的列表，并对其进行不同的样式设置。

<div class = "list">
   <div class = "item range range-light">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-stable">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-positive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-calm">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-balanced">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-energized">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-assertive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-royal">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-dark">
      <input type = "range" name = "volume">
   </div>
</div>

上面的代码将产生以下屏幕 -

离子范围颜色