# Bone Flow #038 Slider Specification v1.0

Component ID: #038  
Component: Slider  
Implementation: v1.0.5  
Status: Development / Browser Runtime NOT CONFIRMED BY USER

## 1. Source boundary

`000-Development-Order_v1.1.1.md` identifies #038 as Slider. Detailed Slider patterns are driven by the explicit #038 work request while the completed Input UI common responsibilities remain unchanged. Browser Runtime and Completion remain user-confirmed gates.

## 2. Core numeric contract

- Bone type: `SLIDER`
- Bone value: finite JavaScript `number`
- Native interaction primitive: `input[type=range]`
- numeric Properties: `value`, `min`, `max`, `step`
- default: `min=0`, `max=100`, `step=1`, TEST default `value=50`
- `max > min`
- `step > 0` and finite
- committed values stay inside min/max and align to step using min as the base
- numeric strings, object coercion, NaN and Infinity are not accepted as numeric IN

## 3. Practical display patterns added in v1.0.4

The following can be configured independently and are also exposed through TEST-page presets.

- Horizontal
- Vertical
- Range: two thumbs. The existing `Bone.value` remains the end/current value; the Range start is component state and OUT adds `range.start / range.end`.
- Ticks: none / marks / labels
- Value Bubble: none / active / always
- Fill: none / value / range / center
- Center / Zero style through `fillMode=center`
- Min / Max labels

Slider-specific display Properties:

- `orientation`: `horizontal | vertical`
- `rangeMode`: boolean
- `rangeStart`: finite number
- `tickMode`: `none | marks | labels`
- `tickStep`: positive finite number
- `valueBubble`: `none | active | always`
- `fillMode`: `none | value | range | center`
- `showMinMax`: boolean

## 4. Time-related display patterns

Internal values remain finite numbers. Formatting changes presentation only.

- `number`: raw number
- `time`: minutes -> `HH:mm`
- `duration`: seconds -> `HH:mm:ss`
- `seconds`: `n s`
- `minutes`: `n min`
- `hours`: `n h`
- `timeline`: seconds -> `T+HH:mm:ss`
- `playback`: seconds -> `m:ss` or `h:mm:ss`
- `schedule`: minutes -> `HH:mm`

TEST presets include Time, Duration, Seconds, Minutes, Hours, Time Range, Timeline, Playback / Seek, and Schedule Range. Time Range and Schedule Range use `rangeMode=true`.

## 5. Range contract

Range does not replace the existing single-number Bone contract.

- `bone.value` / `output.value`: Range end/current value
- `output.range.start`: committed Range start
- `output.range.end`: committed Range end
- `rangeStart <= value`
- both values must satisfy min/max/step
- `getRange()`, `setRangeStart()`, and `setRange()` are available

This preserves existing Joint numeric delivery while allowing practical two-thumb display/use.

## 6. Editing / commit

- `editingValue` and `committedValue` remain separate
- Range additionally keeps editing/committed start values
- native `input` changes editing values
- `changeCommit=true` commits on native `change`
- readonly / disabled block user commit
- `Bone.value` changes only on accepted set/IN or valid commit

## 7. Common Input UI surface retained

- Japanese / English Property display
- Theme: default / dark / light / neon
- Background
- Parent dependency
- width / height
- 9-way position; default `top-left`
- input alignment
- #020 Bone Label delegation
- #022 Active Border Effect delegation; active condition is focus only
- independent Security Test
- #002 Joint connection image
- WAIT / FIFO / BLOCKED
- Smoke / Validation
- JSON / Markdown Runtime Report
- Completion gate

## 8. Formal dependencies

- #001 Bone Core v1.0.0: `BoneCore.normalize()`
- #002 Bone Joint v1.1.36: `BoneJoint.createDeliveryChannel()`
- #017 Bone Text: through #020 Label
- #020 Bone Label: `BoneLabel.create()` / `BoneLabel.getOutput()`
- #022 Bone Hover Border Effect v1.0.1

## 9. Security / Untrusted IN

External IN remains finite-number only. Numeric strings are not implicitly coerced. Accessor-bearing or unsafe input objects are rejected by plain-data inspection. Rejected IN preserves the committed Preview value. Range start is configured/edited inside #038 and does not weaken the external numeric boundary.

## 10. OUT WAIT / BLOCKED

`commit -> #002 createDeliveryChannel()` remains the delivery path. READY delivers immediately, WAITING uses #002 FIFO, and BLOCKED preserves the connection while the guarded value is not delivered. Range metadata accompanies the normal OUT when Range mode is active.

## 11. QA state at package creation

Package/Node/Static QA may pass before Browser Runtime. They are not Browser Runtime PASS.

Browser Runtime: **NOT CONFIRMED BY USER**  
Completion: **false**

## 12. v1.0.4 change scope

- v1.0.1 is the implementation base.
- Existing Security / Joint / WAIT / BLOCKED / Label / Effect / QA / Completion paths are retained.
- Practical and time-related display patterns are added without changing the external finite-number IN boundary.
- Range adds a second native thumb and OUT range metadata while preserving `bone.value` as the end/current numeric value.


## Runtime QA / Security / Completion placement

正式TEST画面の順序は次のとおり。

1. Untrusted IN / Security Test（通常Previewとは独立したSecurity Sandbox。有限numberのみACCEPTED。暗黙変換禁止。BLOCKED時は直前値保持。#002 Joint線を表示）
2. 接続イメージ
3. OUT WAIT / BLOCKED - #002 Joint Integration
4. Smoke Test / Validation Report（1つのReportパネル。初期NOT RUN。手動実行。JSON / MD Runtime Report保存をここに配置）
5. Runtime Console（補助デバッグ領域。正式QAの主表示にはしない）
6. コンポーネント完了管理（ALL PASS + WAIT/BLOCK目視確認後のみ完了可能）

Runtime Reportを独立カードとして重複表示しない。Smoke Test / Validationを別カードへ分離しない。起動時にSmoke / Validationを自動実行しない。


## v1.0.4 Animation Property（v1.0.7で廃止）
- Active Border Effect (#022)とは別責務。
- 値変更Animation: none / fade / slide / pulse / bounce。
- Animation速度: slow / normal / fast。
- 値契約、Security、Joint、WAIT/BLOCK、Completion契約は変更しない。

## 13. v1.0.5 Animation visibility correction（v1.0.7で廃止）

Animation target is the Slider operation area containing track, thumb(s), bubbles and value display. Fade / Slide / Pulse / Bounce must be visibly distinguishable. Slide follows the orientation axis. The transient animation state is removed after the animation finishes, and repeated value changes restart it. This remains separate from #022 Active Border Effect.


## v1.0.7 Fill-only Animation correction

- Animation target is the blue filled range only. Track background, thumb(s), value bubble and value text do not shake, bounce, slide or scale.
- Animation types: `none / flow / shimmer / glow-sweep / breathing-glow`.
- `flow`: moving color/light gradient inside the filled range.
- `shimmer`: narrow white highlight passes through the filled range.
- `glow-sweep`: luminous glow travels through the filled range.
- `breathing-glow`: filled range brightness/glow breathes without changing geometry.
- Animation speed remains `slow / normal / fast`.
- The Fill animation is continuous while selected and remains independent from #022 Active Border Effect.


## v1.0.7 Animation direction / Validation correction
- 青いFill専用Animationに `animationDirection` を追加。
- `forward`: 横は左→右、縦は下→上。
- `reverse`: 横は右→左、縦は上→下。
- `Breathing Glow` は位置移動を伴わないため方向差は視覚上ほぼありません。
- Validation V30は `prefers-reduced-motion` による意図的なAnimation無効化をFAIL扱いしない。CSS selectorがFillへ適用され、通常環境ではanimationNameが有効であることを確認する。


## v1.0.9 #020 Label delegation Smoke correction

- Sliderの `getLabelOutput()` は #020 Bone Labelの現在の公開OUTを直接取得する。
- Smoke S08は `data-bone-type=LABEL` / `data-text-delegated=BoneText` / #020公開OUT / #017 Child OUT を実体検査する。
- 内部保存OUTのコピーだけを根拠にLabel delegationをPASSしない。


## v1.0.9 #020 Label Smoke false-fail correction
- v1.0.8 localhost Runtime ReportでS08のみFAIL、V21 delegated DOMはPASSを確認。
- 完成Input UIの共通Label契約に合わせ、S08は #020公開OUT、Slider側公開OUT、`.bone-label-text` 実DOM、`data-slider-label-source=020` を検査する。
- #020内部実装用の `data-bone-type` / `data-text-delegated` / `getChildOutput()` をS08の必須条件から外し、公開契約外の差異でSmokeをFAILさせない。


## v1.0.10 #117 Animation delegation

- #038 Slider no longer implements Fill animation keyframes in `bone-slider.css`.
- Motion is delegated to completed `#117 Animation v1.0.7`.
- Slider keeps only the relation settings required by #117: `uiNo`, `animationUiNo`, animation type, speed and direction.
- #117 target is fixed to Slider blue Fill: `targetPart = fill`. Track background, thumb, Label, value and bubble are not Animation targets.
- `orientation` is passed to #117 as the Animation axis.
- Slider input operation restarts the selected #117 Animation so the Fill motion is visible during interaction. Loop/Repeat/Timeline are not implemented by #038 because those belong to #121 Timeline.
- Active Border Effect remains a separate #022 responsibility.
- OUT records the #117 relation metadata without changing the numeric `Bone.value` contract.
- Runtime dependencies now include `#117 Animation v1.0.7` and its CSS.
- Browser Runtime remains USER CONFIRMATION REQUIRED until localhost QA is performed for v1.0.10.


## v1.0.11 #117 Animation Loop / WAIT delegation

- Runtime dependency is completed `#117 Animation v1.0.9`.
- `animationLoop`: boolean, default `true`.
- `animationLoopWaitMs`: finite number `0..60000`, default `300`.
- These values are delegated to #117 as `loop` and `loopWaitMs`; #038 does not own a loop scheduler.
- Target remains fixed to Slider Fill (`targetPart=fill`).
- OUT preserves `animation.loop` and `animation.loopWaitMs`.
- Browser Runtime remains USER CONFIRMATION REQUIRED until localhost QA is performed for v1.0.11.