Slider(滑動條):用滑動塊組件透過拖曳的方式從預定範圍內選擇一個數值。
例如改變聲音大小。這邊會使用到Slide (Script)這個組件。
首先在場景內建立一個Slider的元件。Canvas下按右鍵–>UI –>Slider
Slider下還有Background、Fill Area、Handle Slide Area三個子Folder。

Slider裡的Inspector裡修改Highlighted的顏色。並更改下面的設定。

屬性 | 功能描述 |
Direction | 方向:設定滑塊的方向 Left To Right 從左到右 Right To Left 從右到左 Bottom To Top 從下到上 Top To Bottom 從上到下 |
Min Value | 最小值:0 |
Max Value | 最大值:1 |
Whole Number | 用來控制滑動塊值是否限定為整數數值 |
Value | 就是滑動塊當前的數值:0 |
- Background:代表了進度條的底色
- Fill Area;是一個空的Ugui物件體,由Rect Transform確定的範圍將是進度條可以活動的最大範圍。下面的Fill才是進度條在執行時出現的顏色。Fill作為Fill Area的子物件才是這部分的實體。


- Handle Slide Area:代表了Slider上的進度鈕。Handle Slide Area本身也只是確定進度鈕範圍的UGUI空物體。Handle:控制按鈕作為其子物件。


呈現效果如下: