Ionic - 范围滑块

Ionic 范围滑块用于选择和显示某事物的级别。它将表示与最大值和最小值相关的实际值。Ionic 提供了一种简单的方法来使用范围滑块。

使用范围滑块

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

<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>

以上代码将生成以下屏幕：