通過鼠標控制滑塊，在藍色條形上顯示數字，這樣的效果如何達成？本文作者示范了如何用Axure制作輸入數值控制滑塊的效果，希望對你有幫助。

本次分享的的案例是Axure8.0制作的輸入數值控制滑塊，其效果為鼠標移動到藍色條形時，顯示滑動數值，其步進器默認值為滑動數值；當拖動橢圓滑塊時，滑動數值以及步進器數值相應變化；當步進器的值變化時，滑動數值以及滑塊做相應的變化。

預覽及下載地址：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”移動設置，如圖：

設置”滑動數值”矩形文字，如圖：

所有設置完畢。