可拖動進度條的應用場景，例如調節APP屏幕亮度，音樂播放器的音量等。
效果如下圖(●ˇ∀ˇ●)
準備4個元件，如下所示：
1、一個圓形滑塊；（用於觸摸滑動）
2、一個矩形元件，填充色爲灰色，改爲圓角矩形；（作爲進度條的底部背景色）
3、從2複製一個同樣的圓角矩形元件，將填充色改爲其他顏色；（作爲進度提示的填充色）
4、一個文字元件；（顯示百分比進度）
將2、3兩個圓角矩形元件重疊，需要嚴絲合縫的重疊，設置x值和y值一致。
設置填充色元件的width=0；因爲初始狀態進度是0的~
然後將圓形滑塊與進度條左側對齊，佈局調整爲一個進度條改有的樣子 ，如下圖：
到這裏，可以F5欣賞一下UI效果(。・∀・)ノ
咦，圓形元件，爲什麼無法拖拽？說好的自由拖拽呢？
動態面板是唯一一個能夠被拖動的元件。任何元件想要達到拖動的效果，必須放在動態面板中，並且，在動態面板的觸發事件“拖動時”當中設置用例。
所以要達到自由拖拽的效果，必須是動態面板，其他元件是沒有這個功能的。
1、將圓形元件轉換爲動態面板：選中元件，點擊右鍵>轉換爲動態面板。
2、動態面板的觸發事件“拖動時”中，添加用例。 用例包含下列動作：
1）圓形滑塊設置水平拖動，並且設置滑動拖動的左右邊界，限制其拖動邊界不超過bg背景元件的左右兩側
圓形滑塊轉爲動態面板後，在面板狀態中，其位置是從（0，0）開始的，所以滑動範圍是從0開始，即左側left>=0，限制滑動最大距離不超過進度條灰色元件的寬度，即右側right<=背景.width
2）進度條process跟隨動態面板拖拽實現顏色填充。這裏通過修改進度條的尺寸，實現填充色的前進進度，如下圖：
這裏不得不提的就是錨點，anchor 左側，表示以該點作爲作爲原點，進行移動操作。
什麼意思呢？
就是選擇了左側作爲錨點，那麼進度條填充色這個元件，左側就是固定在這個錨點原點上，元件右側進行拉伸放大。
進度條填充色元件尺寸放大，我們只改變元件的寬度，元件的高度使用初始默認設置的即可。所以：寬度=圓形滑塊.x+圓形滑塊.width，高度=進度條.height
設置顏色填充一直延伸到圓形滑塊元件的右側（其實左側也是可以的，延伸到右側，是爲了滑塊和進度條之間相切的地方不會有間隙）如下圖藍色部分示意圖：
這裏用到了局部變量。
如下圖：定義一個局部變量：circle，用來指代圓形滑塊元件，在上方編輯區域，就可以通過局部變量cicrle獲取到圓形滑塊的一些數值了。比如，circle.x，circle.width等。
3）修改百分比進度的文字提示，如下圖：
百分比=進度條進度寬度/背景總寬度。背景總寬度是固定的，所以百分比的值是依賴於進度條寬度，而進度條寬度是依賴於圓形滑塊拖動的距離。
總體而言是：圓形滑塊拖動->進度條填充色寬度改變->百分比文字效果改變
文字百分比計算，如下圖紅色部分所示：
這裏分子分母分別都減掉了一個圓形滑塊的寬度：circle.width（circle即爲圓形滑塊）
爲什麼要這麼處理呢？
1、限制了圓形滑塊的滑動區間，[0，bg.width]；(bg即爲灰色背景)
2、設置了進度條長度，process.width = circle.x+circle.width；（process即爲紅色進度條）
3、假設使用process.width直接算百分比。當進度=0時，百分比= 0 = process.width/bg.width，在這裏，根據條件2中，process.width = circle.x+circle.width ，百分比=0的情況，此時圓形滑塊左側與進度圖相切circle.x=0，必須滿足circle.width=0，但是circle.width!=0，會導致滑塊滑動到起點0的位置，但是百分比>0%。所以百分比=process.width-circle.width/bg.width；
4、在3的條件下，即百分比=process.width-circle.width/bg.width，當進度=100時，百分比=1 = process.width-circle.width/bg.width，根據條件2，process.width = circle.x+circle.width，此時百分比=circle.x+circle.width-circle.width/bg.width = circle.x/bg.width，顯而易見的，circle.x<bg.width，百分比<100%，在circle.x=bg.width-circle.width;所以百分比=process.width-circle.width/bg.width-circle.width;
以上設置完，萬事大吉了嗎?並沒有，因爲拖動過程中，百分比除出來的結果可能除不盡，小數點位數特別長長長，我們要對結果進行保留小數位。這裏介紹幾個函數：
toExponential(decimalPoints)
用途：把數值轉換爲指數計數法。
參數：decimalPoints爲保留小數的位數。
toFixed(decimalPoints)
用途：將一個數字轉爲保留指定位數的小數，小數位數超出指定位數時進行四捨五入。
參數：decimalPoints爲保留小數的位數。
toPrecision(length)
用途：把數字格式化爲指定的長度。
參數：length爲格式化後的數字長度，小數點不計入長度。
我們選擇第二個toFixed，保留指定小數位，並且超出部分進行四捨五入。
這個函數怎麼用呢？例如，保留2爲小數，並四捨五入，LVAR.toFixed(2)；LVAR是什麼呢？就是求出來的結果。
LVAR=(process.width-circle.width)*100/(bg.width-circle.width); (乘以100，是換算成百分比。)
==》LVAR.toFixed(2)
==》加上變量格式[[LVAR.toFixed(2)]]
==》加上百分比符號[[LVAR.toFixed(2)]]%
==》最後替換上LVAR的值，[[((process.width-circle.width)*100/(bg.width-circle.width)).toFixed(2)]]%
完美~
總結
1、拖拽的滑塊，轉換爲動態面板
2、設置滑塊水平拖動，設置左右邊界[0，bg.width]；
3、設置進度條顏色填充效果，利用設置尺寸的操作，設置左側錨點，寬度爲circle.x+circle.width，高度爲process.height；
4、根據進度條元件的寬度，計算進度百分比=(process.width-circle.width)/(bg.width-circle.width)；
5、設置百分比數值保留小數點位數。
以上~