Ionic - Range

Ionic range 用于选择和显示某个事物的级别。它会根据最大值和最小值来表示实际值。Ionic 提供了一种简单的方式来使用 Range。

使用 Range

Range 作为 item 元素内部使用。使用的 class 是 range。我们将在 item class 之后放置这个 class。这将创建一个容器来放置 range。在创建容器后，我们需要添加 input 并为其分配 range type 以及 name 属性。

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

上述代码将生成以下屏幕 −

添加图标

Range 通常需要图标来清晰显示数据。我们只需在 range input 前后添加图标，即可在 range 元素的两侧放置它们。

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

上述代码将生成以下屏幕 −

样式化 Range

下一个示例将展示如何使用 Ionic 颜色来样式化 Range。颜色 class 将使用 range 前缀。我们将创建一个包含九个 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>

上述代码将生成以下屏幕 −