Mashup Builder > 小器具 > 標準小器具 > 滑桿小器具 (主題化)
滑桿小器具 (主題化)
「滑桿」小器具會顯示滑桿元素，其可讓使用者在混搭中輸入數字輸入。您可以啟用範圍選取以允許使用者指定最小值與最大值。
小器具解析
下圖顯示「滑桿」小器具的不同部份。
1. 小器具標籤
2. 值標籤
3. 拖曳操作框
4. 滑桿軌
5. 最小值與最大值標籤
* 
「滑桿」小器具可作為平台中的標準小器具使用，也可作為您可從 SDK 匯入的 web 元件使用。
啟用範圍選取模式
您可以啟用小器具 RangeSelection 內容，以讓使用者在執行時間選取某一範圍的值。啟用範圍選取時，兩個控點用來指示滑桿上值範圍的開始與結束值。您可以使用小器具 Value 與 EndValue 內容來指定這些值。欲根據滑桿值的變更來執行服務，請將 ValueChanged 與 EndValueChanged 事件繫結至混搭中的其他小器具、函數或資料服務。例如，您可以定義值範圍來篩選擷取廠區可用資源相關資訊之服務的資料。
啟用步進模式
您可以將小器具 Stepping Mode 內容設定為 true，來在滑桿軌上啟用增量步進模式。在滑桿上定義增量步階可協助使用者瞭解滑桿軌值的比例，並能夠更容易將控點置於在特定值上。您可以使用下列其中一種方式來定義滑桿上的增量：
• 欲按增量分割滑桿軌，請使用 NumberOfSteps 內容。
• 欲設定步階大小，請使用 StepSize 內容。
例如，您可以為設定在混搭中更新資料所需時間的「滑桿」小器具定義 5 分鐘的增量。在執行時間，控點會自動跳接至沿滑桿軌定義的步階。
啟用垂直模式
您可以將小器具 VerticalSlider 內容設定為 true 來啟用垂直模式。
啟用可編輯值
您可以將小器具 EditableValue 內容設定為 true 來啟用值編輯模式。在此組態中，使用者可以在值標籤中鍵入值，而無需移動控點。欲變更滑桿的值，請連按兩下值標籤，然後鍵入值。控點位置會根據新值自動變更。
設定小器具的樣式
您可以在「樣式內容」面板中編輯所有樣式內容。您可以自訂多個零件在不同狀態下的小器具顏色、字型、形狀與大小。
• Slider 類別可讓使用者編輯背景、前景與滑桿顏色。
• Thumb 類別可讓使用者編輯滑桿指標或拖曳控點的樣式與顏色。
• Min-Max Label 類別可讓使用者編輯最小最大標籤的標籤樣式字型與顏色。
• Track 類別可讓使用者編輯軌跡背景的顏色。
小器具內容
「滑桿」小器具的內容如下表所列。
屬性名稱
描述
基礎類型
預設值
可繫結? (Y/N)
可當地語系化? (Y/N)
label
滑桿標籤中顯示的文字。
STRING
N/A
Y
Y
labelAlignment
將小器具標籤「左」、「右」或「置中」對齊。
STRING
左
Y
N
LabelType
將標籤類型設定為「標題」、「子標題」、「標籤」或「本文」。
STRING
標籤
Y
N
Value
設定或繫結滑桿值。
* 
若您在滑桿中啟用範圍選取，會將此內容值設定為開始值。
NUMBER
N/A
Y
N
CustomClass
定義小器具頂部分區的 CSS。輸入多個類別時，請用空格分隔每個類別。
STRING
N/A
Y
N
TabSequence
設定當您按下 TAB 鍵時小器具反白的順序。
NUMBER
N/A
N
N
EndValue
當處於範圍選取模式下時，第二個控點的滑桿值。
NUMBER
N/A
Y
N
EndValueChanged
滑桿結束值變更時觸發事件。
N/A
N/A
Y
N
Minimum
設定滑桿的最小值。
NUMBER
0
Y
N
Maximum
設定滑桿的最大值。
NUMBER
100
Y
N
SteppingMode
選取以使滑桿在每按一下後移動特定的步長數。
BOOLEAN
False
N
N
StepSize
可設定滑桿移動的每個步長值的變更。
* 
• 此內容僅適用于 SteppingMode。
• 當您設定 NumberOfSteps 內容的值時，會覆寫並重設此內容值。
NUMBER
N/A
Y
N
NumberOfSteps
可設定每按一下滑桿移動的步長數。
* 
• 此內容僅適用于 SteppingMode。
• 當您設定 StepSize 內容的值時，會覆寫並重設此內容值。
NUMBER
N/A
Y
N
ValuePrecision
可設定要在滑桿值小數點後顯示的位數。
NUMBER
N/A
N
N
DisplayValueLabel
將滑桿值標籤的顯示選項設定為「是」、「否」或「拖曳時」。
STRING
是
N
N
EditableValue
可讓您透過編輯混搭中的值標籤來移動控點。
BOOLEAN
False
N
N
DisplayMinMaxLabels
顯示最小值和最大值的標籤。
BOOLEAN
True
N
N
HandleSize
設定控點大小，以像素為單位。
NUMBER
N/A
N
N
TrackSize
設定軌大小，以像素為單位。
NUMBER
N/A
N
N
TrackAlignment
將軌跡與滑桿進行「中心」、「開始」或「結束」對齊。
STRING
置中
N
N
FullTrack
延伸滑桿軌跡以完全包含控點圖示。
BOOLEAN
False
Y
N
MinValueLabel
指定最小值的標籤。
STRING
MIN
Y
Y
MaxValueLabel
指定最大值的標籤。
STRING
MAX
Y
Y
HandleIcon
將控點圖示的形狀控制為「無」、「圓形」或「分割」。
STRING
圓形
N
N
SecondHandleIcon
將第二個控點圖示的媒體實體選取為「無」、「圓形」或「分割」。
STRING
圓形
N
N
MinSideIcon
指定最小側的圖示。
MEDIA ENTITY
N/A
N
N
MinIconSize
控制最小值圖示的大小。選項：「小」、「中」、「大」或「超大」
STRING
中
Y
N
MaxSideIcon
選取最大側的圖示。
MEDIA ENTITY
N/A
N
N
MaxIconSize
控制最大值圖示的大小。選項：「小」、「中」、「大」或「超大」
STRING
N/A
Y
N
RangeSelection
新增第二個控點，並在滑桿上啟用範圍選取。
BOOLEAN
False
N
N
VerticalSlider
將滑桿變更為垂直定向。
BOOLEAN
False
N
N
ReverseMinMaxValues
反轉最小值和最大值的位置。
BOOLEAN
False
N
N
ReverseLabelPosition
反轉最小值和最大值的標籤位置
BOOLEAN
False
N
N
OverlapHandle
啟用範圍選取時，啟用兩個滑桿控點之間的重疊。
BOOLEAN
False
N
N
ValueChanged
滑桿值變更時觸發事件。
N/A
N/A
Y
N
Increment
用於遞增滑桿值的可繫結服務。
N/A
N/A
Y
N
Decrement
用於遞減滑桿值的可繫結服務。
N/A
N/A
Y
N
IncrementSecondHandle
當啟用範圍選取模式時用於遞增第二個控點值的可繫結服務。
N/A
N/A
Y
N
DecrementSecondHandle
當啟用範圍選取模式時用於遞減第二個控點值的可繫結服務。
N/A
N/A
Y
N
Disabled
在混搭中禁用此小器具。小器具會保持可見，但無法互動。
BOOLEAN
False
Y
N
HandleTooltipField
當您將游標移到滑桿控點上時，會顯示工具提示文字。
STRING
N/A
Y
Y
HandleTooltipIcon
為滑桿控點的工具提示設定圖示圖像。
MEDIA ENTITY
N/A
N
N
SecondHandleTooltipField
當您將游標移到滑桿第二個控點上時，會顯示工具提示文字。
* 
當您選取 RangeSelection 時，此內容會顯示出來。
STRING
N/A
Y
Y
SecondHandleTooltipIcon
為滑桿第二個控點的工具提示設定圖示圖像。
* 
當您啟用範圍選取時，此內容會顯示。
MEDIA ENTITY
N/A
N
N
驗證滑桿小器具資料
使用單一選取或範圍選取時，您可以使用驗證內容來設定最小值與最大值：
欲配置預設失敗訊息，請使用 MinValueFailureMessgae 與 MaxValueFailureMessgae 內容。
如需有關通用驗證內容的詳細資訊，請參閱將驗證套用至小器具。
下表列出了 ThingWorx 9.3.4 或更新版本中「驗證」面板上可用的驗證內容。
內容
描述
基礎類型
預設值
是否可繫結 (Y/N)
可當地語系化 (Y/N)
CriteriaMessage
為驗證條件以及驗證失敗時顯示的訊息。
STRING
n/a
Y
Y
CriteriaMessageDetails
為驗證條件和失敗訊息顯示的詳細資訊。
STRING
n/a
Y
Y
MaxValidValue
使用者可設定驗證的最大滑桿值。
STRING
n/a
Y
N
MaxValueFailureMessage
滑桿值高於最大有效值時顯示的訊息。
NUMBER
${value} is the maximum value
Y
Y
MinValidValue
使用者可設定驗證的最小滑桿值。
STRING
n/a
Y
N
MinValueFailureMessgae
滑桿值低於最小有效值時顯示的訊息。
NUMBER
${value} is the minimum value
Y
Y
ShowValidationCriteria
編輯滑桿時，顯示有關所需輸入的提示訊息。
BOOLEAN
False
Y
N
ShowValidationFailure
當所輸入值未通過驗證時顯示失敗訊息。
BOOLEAN
False
Y
N
ShowValidationSuccess
當所輸入值成功通過驗證時，顯示成功訊息。
BOOLEAN
False
Y
N
SucessMessgae
值有效時顯示的訊息
STRING
n/a
Y
Y
SuccessMessageDetails
顯示有關驗證成功訊息之詳細資訊的次要訊息。
STRING
n/a
Y
Y
Validate
小器具值變更時觸發的可繫結事件。將此事件繫結至服務或函數以套用驗證模式或運算式。
event
n/a
Y
N
ValidationCriteriaIcon
選取要在驗證條件的提示訊息中顯示的 SVG 圖示。
IMAGELINK
info
N
N
ValidationFailureIcon
設定當驗證失敗時要在狀況訊息中顯示的 SVG 圖示。
IMAGELINK
error
N
N
ValidationOutput
擷取小器具驗證的輸出。傳回的值為 Undefined、Valid、Unvalidated 或 Invalid。
STRING
n/a
Y
N
ValidationState
這是設定驗證狀態的可繫結內容。您可以將此內容設定為 Undefined 、Unvalidated、Valid、Invalid。
STRING
Undefined
Y
N
ValidationSuccessIcon
選取當驗證成功時要在狀況訊息中顯示的 SVG 圖示。
IMAGELINK
success
N
N
這是否有幫助?