Mashup Builder > ウィジェット > 標準ウィジェット > スライダーウィジェット (テーマ指定可能)
スライダーウィジェット (テーマ指定可能)
スライダーウィジェットにはスライダーエレメントが表示され、ユーザーはこれを使用してマッシュアップで数値を入力できます。範囲選択を有効にすると、ユーザーが最小値と最大値を指定できるようになります。
ウィジェットの構造
次の図は、スライダーウィジェットのさまざまな部分を示しています。
1. ウィジェットラベル
2. 値ラベル
3. ドラッグハンドル
4. スライダートラック
5. 最小値と最大値のラベル
* 
スライダーウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
範囲選択モードの有効化
ウィジェットの RangeSelection プロパティを有効にすることで、ユーザーがランタイムで値を範囲選択できるようになります。範囲選択が有効になっている場合、2 つのハンドルを使用して、スライダー上の値の範囲の開始と終了を示します。これらの値はウィジェットのプロパティ 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
該当なし
Y
Y
labelAlignment
ウィジェットラベルを、「左」「右」、または「中央」に整列します。
STRING
Y
N
LabelType
ラベルのタイプを、「ヘッダー」「サブヘッダー」「ラベル」、または「本文」に設定します。
STRING
ラベル
Y
N
Value
スライダーの値を設定またはバインドします。
* 
このプロパティの値はスライダーでの範囲選択を有効にした場合の開始値として設定されます。
NUMBER
該当なし
Y
N
CustomClass
ウィジェットの最上位の div に CSS を定義します。複数のクラスを入力する場合、各クラスをスペースで区切ります。
STRING
該当なし
Y
N
TabSequence
Tab キーを押したときにウィジェットがハイライトされるシーケンスを設定します。
NUMBER
該当なし
N
N
EndValue
範囲選択モードでの 2 つ目のハンドルのスライダーの値。
NUMBER
該当なし
Y
N
EndValueChanged
スライダーの終了値が変更されるとイベントがトリガーされます。
該当なし
該当なし
Y
N
Minimum
スライダーの最小値を設定します。
NUMBER
0
Y
N
Maximum
スライダーの最大値を設定します。
NUMBER
100
Y
N
SteppingMode
クリックごとに特定のステップ数でスライダーを移動します。
BOOLEAN
False
N
N
StepSize
スライダーが移動する各ステップの値の変化を設定します。
* 
このプロパティは SteppingMode でのみ使用できます。
このプロパティの値は NumberOfSteps プロパティの値を設定するとオーバーライドされてリセットされます。
NUMBER
該当なし
Y
N
NumberOfSteps
各クリックでスライダーが移動するステップ数を設定します。
* 
このプロパティは SteppingMode でのみ使用できます。
このプロパティの値は StepSize プロパティの値を設定するとオーバーライドされてリセットされます。
NUMBER
該当なし
Y
N
ValuePrecision
スライダー値の小数点以下の桁数を設定します。
NUMBER
該当なし
N
N
DisplayValueLabel
スライダーの値ラベルの表示オプションを「はい」「いいえ」、または「ドラッグ」に設定します。
STRING
はい
N
N
EditableValue
マッシュアップ内の値ラベルを編集することでハンドルを移動できます。
BOOLEAN
False
N
N
DisplayMinMaxLabels
最小値および最大値のラベルを表示します。
BOOLEAN
True
N
N
HandleSize
ハンドルサイズをピクセルで設定します。
NUMBER
該当なし
N
N
TrackSize
トラックサイズをピクセルで設定します。
NUMBER
該当なし
N
N
TrackAlignment
スライダーの「中央」「開始」、または「終了」に、トラックを整列します。
STRING
Center
N
N
FullTrack
ハンドルアイコンが完全に含まれるように、スライダートラックを伸ばします。
BOOLEAN
False
Y
N
MinValueLabel
最小値のラベルを指定します。
STRING
MIN
Y
Y
MaxValueLabel
最大値のラベルを指定します。
STRING
MAX
Y
Y
HandleIcon
ハンドルアイコンの形状を「なし」「円」、または「分割」として制御します。
STRING
N
N
SecondHandleIcon
2 つ目のハンドルアイコンのメディアエンティティとして「なし」「円」、または「分割」を選択します。
STRING
N
N
MinSideIcon
最小側のアイコンを指定します。
メディアエンティティ
該当なし
N
N
MinIconSize
最小値アイコンのサイズを制御します。オプション: 「小」「中」「大」「特大」
STRING
Y
N
MaxSideIcon
最大側のアイコンを選択します。
メディアエンティティ
該当なし
N
N
MaxIconSize
最大値アイコンのサイズを制御します。オプション: 「小」「中」「大」「特大」
STRING
該当なし
Y
N
RangeSelection
2 つ目のハンドルを追加してスライダーでの範囲選択を有効にします。
BOOLEAN
False
N
N
VerticalSlider
スライダーの向きを垂直に変更します。
BOOLEAN
False
N
N
ReverseMinMaxValues
最小値および最大値の位置を反対にします。
BOOLEAN
False
N
N
ReverseLabelPosition
最小値および最大値のラベルの位置を反対にします。
BOOLEAN
False
N
N
OverlapHandle
範囲選択が有効になっている場合に、2 つのスライダーハンドルの重なりを有効にします。
BOOLEAN
False
N
N
ValueChanged
スライダーの値が変更されるとイベントがトリガーされます。
該当なし
該当なし
Y
N
Increment
スライダー値を増分するバインド可能なサービス。
該当なし
該当なし
Y
N
Decrement
スライダー値を減分するバインド可能なサービス。
該当なし
該当なし
Y
N
IncrementSecondHandle
範囲の選択モードが有効になっている場合に、2 つ目のハンドルの値を増分するバインド可能なサービス。
該当なし
該当なし
Y
N
DecrementSecondHandle
範囲の選択モードが有効になっている場合に、2 つ目のハンドルの値を減分するバインド可能なサービス。
該当なし
該当なし
Y
N
Disabled
マッシュアップ内のウィジェットを無効にします。ウィジェットは表示されたままになりますが、対話型ではありません。
BOOLEAN
False
Y
N
HandleTooltipField
スライダーハンドルにマウスポインタを合わせたときに、ツールヒントのテキストを表示します。
STRING
該当なし
Y
Y
HandleTooltipIcon
スライダーハンドルのツールヒントのアイコンイメージを設定します。
メディアエンティティ
該当なし
N
N
SecondHandleTooltipField
スライダーの 2 つ目のハンドルにマウスポインタを合わせたときに、ツールヒントのテキストを表示します。
* 
このプロパティは、RangeSelection を選択すると表示されます。
STRING
該当なし
Y
Y
SecondHandleTooltipIcon
スライダーの 2 つ目のハンドルのツールヒントのアイコンイメージを設定します。
* 
範囲選択を有効にした場合、このプロパティが表示されます。
メディアエンティティ
該当なし
N
N
スライダーウィジェットのデータの検証
単一選択または範囲選択を使用している場合、検証プロパティを使用して最小値と最大値を設定できます。
デフォルトの失敗メッセージを設定するには、プロパティ MinValueFailureMessgae および MaxValueFailureMessgae を使用します。
共通の検証プロパティの詳細については、ウィジェットへの検証の適用を参照してください。
次の表に、「検証」パネルで使用可能な検証プロパティを示します。
プロパティ
説明
ベースタイプ
デフォルト値
バインド可能か (Y/N)
ローカライズ可能か (Y/N)
CriteriaMessage
検証に失敗したとき、および検証基準で表示されるメッセージ。
STRING
該当なし
Y
Y
CriteriaMessageDetails
検証基準および失敗のメッセージで表示される詳細。
STRING
該当なし
Y
Y
MaxValidValue
ユーザーが検証を設定可能なスライダーの最大値。
STRING
該当なし
Y
N
MaxValueFailureMessage
スライダーの値が有効な最大値より大きい場合に表示されるメッセージ。
NUMBER
${value} is the maximum value
Y
Y
MinValidValue
ユーザーが検証を設定可能なスライダーの最小値。
STRING
該当なし
Y
N
MinValueFailureMessgae
スライダーの値が有効な最小値より小さい場合に表示されるメッセージ。
NUMBER
${value} is the minimum value
Y
Y
ShowValidationCriteria
スライダーを編集しているときに、必須の入力に関するヒントメッセージを表示します。
BOOLEAN
False
Y
N
ShowValidationFailure
入力した値が検証に失敗したときに、失敗のメッセージを表示します。
BOOLEAN
False
Y
N
ShowValidationState
ユーザーがランタイムでウィジェットを操作する前に検証状態を表示するために使用できるバインド可能なサービス。デフォルトでは、検証状態はユーザー操作の後にのみ表示されます。
Service
該当なし
入力
N
ShowValidationSuccess
入力した値が正しく検証されたときに、成功のメッセージを表示します。
BOOLEAN
False
Y
N
SucessMessgae
値が有効である場合に表示されるメッセージ。
STRING
該当なし
Y
Y
SuccessMessageDetails
検証成功のメッセージに関する詳細情報を表示するセカンダリメッセージ。
STRING
該当なし
Y
Y
Validate
ウィジェットの値が変更されたときにトリガーされるバインド可能なイベント。このイベントをサービスまたは関数にバインドして、検証のパターンまたは定義式を適用します。
イベント
該当なし
Y
N
ValidationCriteriaIcon
検証基準のヒントメッセージ内に表示する SVG アイコンを選択します。
IMAGELINK
info
N
N
ValidationFailureIcon
検証に失敗した場合にステータスメッセージ内に表示する SVG アイコンを設定します。
IMAGELINK
error
N
N
ValidationOutput
ウィジェット検証の出力を取得します。戻り値は UndefinedUnvalidatedValid、または Invalid です。
STRING
該当なし
Y
N
ValidationState
検証状態を設定するバインド可能なプロパティ。このプロパティは Undefined UnvalidatedValidInvalid に設定できます。
STRING
Undefined
Y
N
ValidationSuccessIcon
検証に成功した場合にステータスメッセージ内に表示する SVG アイコンを選択します。
IMAGELINK
success
N
N
これは役に立ちましたか?