Angle Slider

方位・回転角度のように「0〜359 度の環状値」を 1 個選ばせる入力です。値は常に 0..=359 の整数へ正規化され、359 度からの増分・0 度からの減分も符号付き剰余を経由せずラップアラウンドします。

fandhe-frontend-headless-ui の angle_slider mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目（回転する thumb の CSS 表現等）は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

Root / Label / Control / Thumb / MarkerGroup / Marker / HiddenInput / ValueText の 8 anatomy パーツで構成されます。Root/Label/Control/Thumb は disabled/readonly/invalid の 3 状態を共有し、それぞれ data-disabled/data-readonly/data-invalid を出力します。Marker は目盛り角度と現在値の大小関係から data-state（under-value/over-value/at-value）を出力します。

スタイル済みの表示例は Angle Slider を参照してください。

関連 API: fandhe-frontend-headless-ui API

自前 CSS の最小例

Themes 版を使わず本部品を直接使う場合、[data-scope="angle-slider"][data-part="..."] セレクタでスタイルを当てます。以下は circular な control とサムの回転、状態セレクタの最小例です。headless 層は回転角を CSS カスタムプロパティとして自動出力しないため、呼び出し側が thumb の attrs へ ("style", "--fandhe-angle: 135deg") のように現在角度を渡す必要があります（fandhe-frontend-pre-styled-ui の thumb_styled はこれを内部で一元的に組み立てます）。

CSS

[data-scope="angle-slider"][data-part="control"] {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #eee;
}

[data-scope="angle-slider"][data-part="thumb"] {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #333;
  /* --fandhe-angle は呼び出し側が thumb の attrs 経由で style 属性に
     設定する（例: ("style", "--fandhe-angle: 135deg")）。未設定時は
     0deg にフォールバックする。 */
  transform: rotate(var(--fandhe-angle, 0deg));
  transform-origin: 0 2rem;
}

[data-scope="angle-slider"][data-part="root"][data-readonly] {
  opacity: 0.7;
}

[data-scope="angle-slider"][data-part="root"][data-invalid] {
  outline: 2px solid crimson;
}

[data-scope="angle-slider"][data-part="marker"][data-state="at-value"] {
  background: #333;
}

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Direction

135°

Direction (readonly, invalid)

45°

Features

root/label/control/thumb/marker_group/marker/hidden_input/value_text の 8 anatomy パーツで構成し、角度値は常に 0..=359 の整数へ正規化される（angle_slider.rs:170-177）。
AngleSliderProps（disabled/readonly/invalid）を root/label/control/thumb で共有し、data-disabled/data-readonly/data-invalid を一律付与する（angle_slider.rs:274-291）。
control は role="presentation" を固定出力する（angle_slider.rs:331-346）。
thumb は WAI-ARIA slider パターンに従い role="slider"/aria-valuemin="0"/aria-valuemax="360"/aria-valuenow/aria-valuetext を常時出力する。props.disabled が true のとき tabindex="-1" + aria-disabled、それ以外（readonly を含む）は tabindex="0"（angle_slider.rs:349-382）。
marker は value（目盛り角度）と現在角度の大小から data-state を under-value/over-value/at-value の 3 値へ固定する（angle_slider.rs:423-451）。
hidden_input（<input type="hidden">）はフォーム送信専用であり、意味論（role="slider"）は thumb 側が担う（angle_slider.rs:386-401）。
"home"/"end" dispatch（AngleSliderAction::SetToMin/SetToMax）で最小値（0 度）/step グリッド上の最大値へ設定する状態機械契約を持つ（angle_slider.rs:613-617, 650-651）。fandhe-frontend-wasm-full の DOM keydown 配線は REQ-11（WASM バンドルサイズ）予算逼迫のため本イシューでは未対応（Arrow キーのみ配線済み、下記 Keyboard 節参照）。

Anatomy

root
  label
  control
    thumb
    marker-group
      marker
  hidden-input
  value-text

API Reference

Arguments

Name	Type	Default	Description
`root/label/control/thumb(props)`	`&AngleSliderProps`	`&AngleSliderProps::default()`	disabled/readonly/invalid の状態束。4 パーツ共通のため代表 1 行に集約（angle_slider.rs:274-291）。
`thumb(now)`	`&str`	—	現在角度の文字列表現。aria-valuenow へそのまま出力される。
`thumb(value_text)`	`&str`	—	"{value}deg" 形式の文字列。aria-valuetext へ出力される。
`marker(value, current, disabled)`	`u16, u16, bool`	—	目盛り角度・現在角度・無効化。data-value/data-state（under-value/over-value/at-value）へ反映される（angle_slider.rs:423-451）。
`hidden_input(name, value)`	`&str, &str`	—	フォーム送信名・送信値。<input type="hidden"> の name/value 属性へそのまま出力される。
`attrs / children`	`Vec<(&str, &str)> / Vec<Node>`	—	各パーツ共通の追加属性・子ノード（全パーツで型が同じため代表 1 行に集約）。

Data Attributes

Part	Attribute	Observed Values
`control`	`data-invalid`	（値なし）
`control`	`data-readonly`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-readonly`	（値なし）
`marker`	`data-state`	`at-value`, `over-value`, `under-value`
`marker`	`data-value`	`135`, `180`, `90`
`root`	`data-invalid`	（値なし）
`root`	`data-readonly`	（値なし）
`thumb`	`data-invalid`	（値なし）
`thumb`	`data-readonly`	（値なし）

Examples

Readonly + Invalid

readonly かつ invalid な 270 度の風向を marker_group/marker 付きで組み立てた例です。

readonly かつ invalid な 270 度の風向を、marker_group/marker（180/270/315 度の目盛り）付きで組み立てた例です。

Wind direction

270°

Accessibility

Keyboard Interactions

Key	Description
ArrowUp / ArrowRight	step 分だけ時計回りに増加する（fandhe-frontend-wasm-full の action_for_key で配線済み）。
ArrowDown / ArrowLeft	step 分だけ反時計回りに減少する（同上）。

WAI-ARIA

Attribute	Description
role="presentation"	control パーツに固定付与する。意味論は thumb の role="slider" が単独で担う（angle_slider.rs:331-346）。
role="slider"	thumb パーツに固定付与する。
aria-valuemin / aria-valuemax	thumb パーツへ常に "0"/"360" を固定出力する。
aria-valuenow / aria-valuetext	呼び出し側が渡す現在値・整形済みテキストをそのまま出力する。
aria-disabled	props.disabled が true のとき tabindex="-1" と対で thumb へ付与する（readonly のみでは付与しない）。