Axure | 滑動條：拖動滑塊改變進度

Axure | 滑動條：拖動滑塊改變進度

www.pmgod.cn

2019-01-19
1557

零基礎學產品，BAT產品總監帶，2天線下集訓+1年在線課程，全面掌握優秀產品經理必備技能。 了解詳情

釋放雙眼，帶上耳機，聽聽看~！

生活中經常遇到需要平滑改變一個值的應用場景。 比如聽音樂的過程中，調節音量，又比如游戲競猜過程中，調節競猜數量等，這種場景最適合使用滑動條。 作者將通過這篇案列分享，教大家使用Axure製作實現“滑動條：拖動滑塊改變進度”。

演示地址： 滑動條：拖動滑塊改變進度

實現效果：

1. 左右拖動滑塊，實時顯示當前進度；


2. 向左或向右拖動均有邊界值，無法拖出邊界範圍；


3. 實時顯示當前的百分比數值。

原理分析：

1. 滑動條效果由固定長度背景+進度可見區域組成


2. 拖動滑動，觸發進度可見區域改變，從而顯示滑動條效果


3. 利用進度可見區域與背景的比例實時計算當前進度百分比

元件準備：

1. 一張圖片，轉換為動態面板，表示滑塊；


2. 紅色背景矩形元件，轉換為動態面板，利用動態面板的可見範圍，表示進度；


3. 灰色背景矩形元件，用於呈現滑塊進度對比；


4. 一個文本矩形，默認初始文字“當前百分比：0%”，用於顯示當前百分比。

將進度面板​​裡面的紅色背景矩形向左移動，使矩形的右邊界為0，此案例矩形寬度為300，所有向左移動300。

整理元件後，最終呈現效果如下：

實現步驟：

整個案例過程，只需對滑塊做事件設置，即可完成滑動條效果。

拖動滑塊時，水平移動滑塊，同時設置文字改變；滑塊在移動的過程中，設置進度面板裡面的紅色背景元件跟隨滑塊移動。

下圖是移動滑塊的事件設置界面，注意是“水平移動”；左邊界、右邊界值的設置，防止拖動滑動超出範圍。

左側邊界值設置如下：

右側邊界值設置如下：

我們在拖動滑塊時，設置文本描述元件的值，實時顯示當前滑動100%進度。

最後來一張跟隨事件的配置截圖。

本案例已完成，點擊查看上一篇案例《 Axure版跳一跳如何製作？ 》

 

本文由 @十月大神 原創發佈於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議。

給作者打賞，鼓勵TA抓緊創作！

http://www.kubonews.com/2019012242397.html

每日即時更新新聞，請上：http://www.kubonews.com