本文將利用一些小技巧，實現從1到100，以及可以在文字上方正?；瑒?，不再當心滑塊在文本上方時，受文本框影響導致不好滑動。

預覽地址：https://ws8zsg.axshare.com

一、準備階段

先制作一個335*36的矩形（命名為：分母），將矩形的4個角的圓角設置為18；

在矩形分母上方，制作一個100*36的矩形（命名為：分子），矩形分子左側的兩個圓角設置為18，將其顏色改為藍色，并增加1像素的邊框效果（如圖）；

注意：這里的邊框效果選色時最好是純色，不設置透明度的。不然之后會出現一些無法解釋的后果（壞笑一下）。

因為需要拖動，那我們這邊增加一個拖動的載體：制作一個36*36的圓，去掉邊框；為了后續看到的圓會更立體些，可以增加移量為0*0、范圍為5的投影效果；

差點忘記了，還需要在最上方增加一個表單元件中的文本框，將該元件禁用后，把其元件樣式改為文本段落（如圖），刪除系統默認的交互樣式，并將字體的對齊方式改為居中（為啥要將元件的樣式改為文本段落，這個在之后講解交互的時候再透露）；

準備工作已經完成了，接下來就該開始設計交互效果了。

二、交互設計

在預覽的地址中，可以看到滑塊需要跟隨移動。所以我們需要選中圓，然后鼠標右擊，將其轉換為動態面板，并在交互中選擇【拖動時】的交互：

• 拖動時，我們需要水平移動圓的位置，設置動態面板跟隨水平移動；
• 因為我們需要圓在分母的范圍內進行移動，那再給圓設置一個左右的限制。左側：需大于等于分母的左邊位置；右側：需要小于等于分母的右邊位置（如圖）；

左側函數：[[LVAR1.left]] ；右側函數：[[LVAR1.right]]。其中“LVAR1”為局部變量，指代分母（如圖）；

移動的效果已經設置完成了，接下來需要讓分子跟隨圓移動的距離，改變長度。給動態面板增加設置分子尺寸的動作；

• 先要知道圓具體移動的多少距離要怎么算，需要有個靜態的參照物，而滑動條中唯一是靜態的就只有分母了，所以我們需要使用圓移動后的 X 坐標減去分母的 X 坐標，這就獲得了偏移量（如圖），x軸的函數為：[[This.x-LVAR1.x+18]] ；
• Y軸由于沒有變化，這里就直接使用了分子原來的高度36，錨點可以是左上或者左側都可以；

前面有提到，不要給分子的描邊顏色增加透明度，是因為增加透明度后，在你移動后，分子的樣式會發生變形，至于原因，我也不知道，這只是我踩到的坑。

接下來，我們需要對文本的內容進行設置了，給動態面板再增加一個設置文本的動作：

• 數值占比，具體計算：用分子的寬度 除以 分母的寬度，再乘以100，然后取整；所以我們這里需要用到取整的函數 toFixed(decimalPoints) （如圖）；

• 設置局部變量“LVAR1” 為分子，“LAVR2”為分母；整體的函數為：[[((LVAR1.width-18)/(LVAR2.width-36)*100).toFixed(decimalPoints)]]（如圖）；

再注意一個細節：我的分子位置就到圓形的一半，如果要是和圓形右對齊的話，在縮到最右側的時候，分子也是會出現變形，所以我這邊在計算時，需要將分子的長度減去18，分母的寬度減去36；

到這一步就可以算是完成了滑動條的設計了，可以先預覽下效果，但你可能會發現停留在文字上方的時候，就會變得特別難拖動了，別急，還有兩個步驟；

三、優化升級

前面之所以使用表單元件文本框，是因為文本框可以設置一個文本改變時的交互動作，你預覽現在的效果，能看到數值是從0到100；

所以這里需要給文本框增加一個交互效果：文本改變時，將內容設置為數值：1（如圖）；

這里需要增加一個判斷條件，就是當數值等于0的時候，我們需要將數值強行設置為1；

最后，將素材全選后，鼠標右鍵將其轉換為動態面板，再為動態面板增加拖動時的交互，動作設置為觸發動態面板1的拖動效果，就有了原型預覽里體驗到的效果了（如圖）。