#038 Slider v1.0.11

Finite-number Slider / Practical & Time display patterns / Property / Security / Joint / WAIT・BLOCKED / QA / Completion

DevelopmentINDEX: /boneflow/test/bone-slider.htmlBrowser Runtime: USER CONFIRMATION REQUIRED

使用コンポーネント

#001 Bone Core確認中

#002 Bone Joint確認中

#017 Bone Text確認中

#020 Bone Label確認中

#022 Hover Border Effect確認中

#117 Animation確認中

#038 Slider確認中

プロパティ設定

Property 表示言語

値 (value)

最小値 (min)

最大値 (max)

刻み (step)

表示パターン / 時間表示

プリセット

値の表示形式

向き

Range（2つまみ）

Range開始値

目盛り

目盛り間隔

Value Bubble

Track Fill

Min / Max表示

読み取り専用 (readonly)

無効 (disabled)

変更時commit (changeCommit)

ラベル (label)

Sliderとラベルの余白 (px)

#020 Label フォントサイズ (px)

テーマ (theme)

背景色

親要素に依存

単体時の表示設定

幅 (px)

高さ (px)

表示位置（9方向）

Slider位置

親要素設定（継承確認用）

親の幅

親の高さ

親のSlider位置

親の背景色

親の文字色

親の角丸

#117 Animation

Slider UI番号

Animation UI番号

Animation種類

Animation速度

Animation方向

Animationループ

ループ間WAIT (ms)

#117 Target Part

アクティブ時の枠Effect

枠Effect

Effect色

Effect方向

Effect速度

Property: ready

Slider Preview

editing-

committed-

valid-

delivery-

focused-

Untrusted IN / Security Test

通常Previewとは独立した専用Sliderで検証します。有限numberだけをACCEPTEDし、numeric string / NaN / Infinity / object / getter / ProxyはBLOCKED。暗黙変換せず、BLOCKED時はSecurity専用Sliderの直前値を保持し、通常Previewは変更しません。

Source / Joint IN未実行#002 Joint

Slider Security未実行検査待ち検査待ち

#038 Security Sandbox50値変更なし

未実行

Result JSON: 未実行

接続イメージ

#002 Bone Joint実体で評価。正常接続、IN/OUT Target Field不存在、IN/OUT型不一致の5ケース。

INOUT型不一致不存在/切断

OUT WAIT / BLOCKED - #002 Joint v1.1.36 Integration

通常Previewとは分離したDelivery Sandboxを使用します。WAITはFIFO復帰、BLOCKは接続を維持し危険値をTargetへ届けないことを確認します。

#038 SliderDelivery Sandbox

READYTarget

READY ○Queue 0

WAIT中はTargetへ未達、READY復帰後にFIFOで値が届いたことを目視確認しました。BLOCK中も接続維持、危険値がTargetへ届かなかったことを目視確認しました。

Target受信ログ: なし

Joint描画確認中...

Smoke Test / Validation Report

NOT RUN

実行日時-

検査件数0件

PASS0件

FAIL0件

実行時間0.0ms

Version1.0.11

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

コンポーネント完了管理

Smoke TestとValidation ReportがALL PASSになり、WAIT / BLOCKEDの目視確認が完了した後に完了できます。

Component#038 Bone Slider

Version1.0.11

Completion Flagfalse

StatusDevelopment

ValidationNOT RUN

完了日時-

全テストALL PASS + WAIT/BLOCK目視確認後に完了できます。

属性	役割	値 / Default	説明
`class`	機能Class	`bone-html-class-use bone-...-...`	`bone-html-class-use` とClass一覧の機能Classを同じ `class=""` に設定します。対応Public APIと1対1です。
`data-bone-event`	起動タイミング	`load` / click / input / change / manual 等 Default: `load`	複数指定は空白またはカンマ区切り。`manual` は自動実行せず、Bridgeの `invoke()` から実行します。
`data-bone-args`	引数一括指定	JSON Array	Public APIの引数順そのままのJSON配列です。例: `["$self","$value",{}]`
`data-bone-arg-N`	引数個別指定	Nは0始まり	`data-bone-arg-0`, `data-bone-arg-1` のように1引数ずつ指定します。一括指定より個別値を補完できます。
`data-bone-once`	イベント1回限定	`true` / Default: false	click等のイベント監視を1回だけ実行したい場合に指定します。
`data-bone-append-result`	Element戻り値	`false` でappend停止 Default: append	Public APIがElementを返した場合、既定ではClass設定要素へappendします。
`data-bone-throw`	Debug再throw	`true` / Default: false	Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。

値	解決内容
`$self`	Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。
`$event`	Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。
`$value`	input / textarea / select等の現在の value を渡します。
`$checked`	checkbox / radio等の現在の checked(Boolean)を渡します。
`$text`	Classを設定した要素の textContent を渡します。
`$dataset`	Classを設定した要素の dataset を通常Objectとして渡します。
`$files`	file input の FileList を渡します。
`$selector:...`	...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。
`$id:...`	...をDOM idとして document.getElementById() で解決し、そのElementを渡します。
`$global:...`	window / globalThis上の指定名の値を渡します。
`$handler:...`	window / globalThis上の指定名のFunctionをコールバック引数として渡します。

結果	内容	用途
`element.__boneClassResult`	Public APIの生の戻り値	JavaScript側で元のObject / Element / primitiveをそのまま参照します。
`data-bone-class-status`	`ok` / `error`	HTML属性だけで直近のClass実行成否を確認します。
`data-bone-class-result`	戻り値のserialize結果	DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。
`bone-html-class-result`	成功CustomEvent	`detail` に componentId / className / api / value を持ちます。
`bone-html-class-error`	失敗CustomEvent	`detail` に componentId / className / api / error を持ちます。

HTML Class	`bone-slider-defaults`
対応Public API	`BoneSlider.defaults`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-normalize-options`
対応Public API	`BoneSlider.normalizeOptions`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-validate-value`
対応Public API	`BoneSlider.validateValue`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`value`	String / API許容値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

HTML Class	`bone-slider-inspect-untrusted-number`
対応Public API	`BoneSlider.inspectUntrustedNumber`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-format-value`
対応Public API	`BoneSlider.formatValue`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-create`
対応Public API	`BoneSlider.create`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`boneInput`	Object	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

HTML Class	`bone-slider-is-instance`
対応Public API	`BoneSlider.isInstance`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-input`
対応Public API	`BoneSlider.getInput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-start-input`
対応Public API	`BoneSlider.getStartInput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-label`
対応Public API	`BoneSlider.getLabel`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-label-output`
対応Public API	`BoneSlider.getLabelOutput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-value`
対応Public API	`BoneSlider.getValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-editing-value`
対応Public API	`BoneSlider.getEditingValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-committed-value`
対応Public API	`BoneSlider.getCommittedValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-range`
対応Public API	`BoneSlider.getRange`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-bone`
対応Public API	`BoneSlider.getBone`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-options`
対応Public API	`BoneSlider.getOptions`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-animation-state`
対応Public API	`BoneSlider.getAnimationState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-animation-output`
対応Public API	`BoneSlider.getAnimationOutput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-restart-animation`
対応Public API	`BoneSlider.restartAnimation`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-stop-animation`
対応Public API	`BoneSlider.stopAnimation`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-get-state`
対応Public API	`BoneSlider.getState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-set-value`
対応Public API	`BoneSlider.setValue`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`value`	String / API許容値	`data-bone-arg-1` または `data-bone-args[1]`	`"$value"`
2	`options`	Object	`data-bone-arg-2` または `data-bone-args[2]`	`{}`

HTML Class	`bone-slider-set-editing-value`
対応Public API	`BoneSlider.setEditingValue`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-set-range-start`
対応Public API	`BoneSlider.setRangeStart`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-set-range`
対応Public API	`BoneSlider.setRange`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-set-options`
対応Public API	`BoneSlider.setOptions`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-apply-bone`
対応Public API	`BoneSlider.applyBone`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-slider-apply-joint-input`
対応Public API	`BoneSlider.applyJointInput`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。