通過鼠標控制滑塊，在藍色條形上顯示數字，這樣的效果如何達成？本文示範瞭如何用Axure製作輸入數值控制滑塊的效果，希望對你有幫助。
其效果爲鼠標移動到藍色條形時，顯示滑動數值，其步進器默認值爲滑動數值；當拖動橢圓滑塊時，滑動數值以及步進器數值相應變化；當步進器的值變化時，滑動數值以及滑塊做相應的變化。
預覽地址 https://5gx595.axshare.com（複製網址到瀏覽器預覽）
一、製作原型
1、拖入一個動態面板點擊進入，拖入一個矩形命名爲：b，設置其寬度：600px，高度：4px，顏色設置爲：#E4E4E4；在矩形b上拖入一個矩形命,設置其寬度：450px，高度：4px，設置顏色爲：#0000FF；在矩形上拖入一個動態面板命名爲:a，點擊進入拖入一個橢圓形,設置其寬度爲:18px，高度:18px，顏色爲：#0000FF，如圖
2、拖入一個矩形元件命名爲：滑動數值，設置默人文字爲：75，設置寬度：30px，高度：25px，顏色設置爲：#000000；拖入一個矩形其形狀設置爲三角形，放置在滑動數值矩形下方，設置顏色爲：#000000；滑動數值矩形和三角形組合命名爲：1，設置爲隱藏狀態，如圖
3、製作步進器，拖入一個矩形，其上放置“減號”圖片並組合一起命名爲：減；拖入另一個矩形框，其上放置“加號”圖片並組合一起命名爲：加；在兩個組合之間加入文本框，默認值爲：75，如圖
最終設計如圖
二、交互設置
1、對動態面板a(橢圓滑塊)進行交互設置
(1）鼠標移入時
鼠標移入時顯示組合"1"，並對橢圓形大小進行尺寸設置，如圖
（2）鼠標移出時
鼠標移出時判斷藍色矩形狀態爲：false，隱藏組合"1"並設置橢圓形大小爲原來尺寸，如圖
（3）移動時
鼠標移動時設置組合"1"的移動狀態爲：跟隨，如圖
（4）拖動時
鼠標拖動時，顯示組合"1"，如圖
設置"滑動數值"矩形文字，如圖
設置文本框文字，如圖
設置藍色矩形狀態爲“true，如圖
設置藍色矩形尺寸，如圖
對動態面板"a"移動設置，如圖
（4）拖動結束時
鼠標拖動結束時，隱藏組合"1"，設置藍色矩形狀態爲：false,設置橢圓形尺寸爲原來尺寸，如圖
2、對步進器進行設置
(1)對組合“減”進行“鼠標點擊時”設置
判斷文本框的文字是否大於0，如果大於0，設置文本框文字，如圖
如果文本框的文字是否小於0，設置藍色矩形尺寸，如圖
對動態面板"a"進行移動設置，如圖
對"滑動數值"矩形進行文字設置，如圖
(2)對組合“加”進行“鼠標點擊時”設置
設置文本框文字，如圖
設置藍色矩形尺寸，如圖
對動態面板"a"移動設置，如圖
設置"滑動數值"矩形文字，如圖
所有設置完畢。