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>

以上程式碼將生成以下螢幕：