1、有準確值的進度條

有準確值的進度條會顯示當前進度正處於整體進度的佔比位置，使用者可以更直觀的預期完成時間；
使用進度條控制元件，需要一個進度條控制元件容器，mui會自動識別該容器下是否有進度條控制元件，若沒有，則自動建立。
進度條控制元件DOM結構：

<divid="demo1"class="mui-progressbar"><span></span></div>

初始化:

mui(container).progressbar({progress:20}).show();

progressbar初始化邏輯：
檢查當前容器(container控制元件)自身是否包含.mui-progressbar類：
當前容器包含.mui-progressbar類，則以當前容器為目標控制元件，直接顯示進度；
否則，檢查當前容器的直接孩子節點是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節點為目標控制元件，顯示進度；
若當前容器的直接孩子節點，均不含.mui-progressbar類,則自動建立進度條控制元件；
更改顯示進度條:

mui(container).progressbar().setProgress(50);

關閉進度條:

mui(container).progressbar().hide();

備註：關閉進度條一般用於動態建立（DOM中預先未定義）的進度條，呼叫hide方法後，會直接刪掉對應的DOM節點；若已提前建立好DOM節點的進度條，呼叫hide方法無效；

2、滑塊

<divclass="mui-input-row mui-input-range"><label>Range</label><inputtype="range"min="0"max="100"></div>
 

獲取滑塊數值的樣例程式碼

<divclass="mui-content"><divclass="mui-input-row mui-input-range"><label>Range</label><inputtype="range"min="0"max="100"id="range1"></div><divstyle="padding:20px;"><inputtype="button"class="mui-btn"value="獲取滑塊值"onclick="getVal();"/></div></div>
 
<script>function getVal(){var rangeObj = mui('#range1');
    mui.toast(rangeObj[0].value);}</script>

3、switch 開關
mui提供了開關控制元件，點選滑動兩種手勢都可以對開關控制元件進行操作,UI如下：

預設開關控制元件,帶on/off文字提示，開啟時為綠色背景，基本class類為.mui-switch、.mui-switch-handle，DOM結構如下：

<divclass="mui-switch"><divclass="mui-switch-handle"></div></div>

若希望開關預設為開啟狀態，只需要在.mui-switch節點上增加.mui-active類即可，如下：

<!-- 開關開啟狀態，多了一個.mui-active類 --><divclass="mui-switch mui-active"><divclass="mui-switch-handle"></div></div>

若希望隱藏on/off文字提示，變成簡潔模式，需要在.mui-switch節點上增加.mui-switch-mini類，如下：

<!-- 簡潔模式開關關閉狀態 --><divclass="mui-switch mui-switch-mini"><divclass="mui-switch-handle"></div></div><!-- 簡潔模式開關開啟狀態 --><divclass="mui-switch mui-switch-mini mui-active"><divclass="mui-switch-handle"></div></div>

mui預設還提供了藍色開關控制元件，只需在.mui-switch節點上增加.mui-switch-blue類即可，如下：

<!-- 藍色開關關閉狀態 --><divclass="mui-switch mui-switch-blue"><divclass="mui-switch-handle"></div></div><!-- 藍色開關開啟狀態 --><divclass="mui-switch mui-switch-blue mui-active"><divclass="mui-switch-handle"></div></div>

藍色開關上增加.mui-switch-mini即可變成無文字的簡潔模式

若要獲得當前開關狀態，可通過判斷當前開關控制元件是否包含.mui-active類來實現，若包含，則為開啟狀態，否則即為關閉狀態；如下為程式碼示例：

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");if(isActive){
  console.log("開啟狀態");}else{
  console.log("關閉狀態");}

若使用js開啟、關閉開關控制元件，可使用switch外掛的toggle()方法，如下為示例程式碼：

mui("#mySwitch").switch().toggle();

事件
開關控制元件在開啟/關閉兩種狀態之間進行切換時，會觸發toggle事件,通過事件的detail.isActive屬性可以判斷當前開關狀態。可通過監聽toggle事件，可以在開關切換時執行特定業務邏輯。如下為使用示例：

document.getElementById("mySwitch").addEventListener("toggle",function(event){if(event.detail.isActive){
    console.log("你啟動了開關");}else{
    console.log("你關閉了開關");}})