Skip to content
fandhe-frontend
GitHub

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 は利用者が当てます。

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

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

Demo

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

Direction
135°

Features

  • root/label/control/thumb/hidden_input/value_text の 6 anatomy パーツで構成し、角度値は常に 0..=359 の整数へ正規化される（angle_slider.rs:44-45）。
  • thumb は WAI-ARIA slider パターンに従い role="slider"/aria-valuemin="0"/aria-valuemax="360"/aria-valuenow/aria-valuetext を常時出力する（angle_slider.rs:213-215, 219-238）。
  • disabled が true のとき thumb は tabindex="-1" + aria-disabled、false のとき tabindex="0" を出力する（angle_slider.rs:216-218, 234-238）。
  • hidden_input（<input type="hidden">）はフォーム送信専用であり、意味論（role="slider"）は thumb 側が担う（angle_slider.rs:245-248）。

Anatomy

root
  label
  control
    thumb
  hidden-input
  value-text

API Reference

Arguments

NameTypeDefaultDescription
root(disabled) / control(disabled)boolfalse各パーツへ data-disabled を反映するかどうか（同じ引数のため 1 行に集約）。
thumb(now)&str現在角度の文字列表現。aria-valuenow へそのまま出力される。
thumb(value_text)&str"{value}deg" 形式の文字列。aria-valuetext へ出力される。
thumb(disabled)boolfalsetrue のとき tabindex="-1" + aria-disabled、false のとき tabindex="0"。
hidden_input(name, value)&str, &strフォーム送信名・送信値。<input type="hidden"> の name/value 属性へそのまま出力される。
attrs / childrenVec<(&str, &str)> / Vec<Node>各パーツ共通の追加属性・子ノード（全パーツで型が同じため代表 1 行に集約）。

Examples

Basic

270 度の風向を表す Angle Slider の組み立て例です。

root/control/thumb/hidden_input/value_text を組み立てた 270 度の例です。

Wind direction
270°

Accessibility

WAI-ARIA

AttributeDescription
role="slider"thumb パーツに固定付与する（angle_slider.rs:227）。
aria-valuemin / aria-valuemaxthumb パーツへ常に "0"/"360" を固定出力する（angle_slider.rs:228-229）。
aria-valuenow / aria-valuetext呼び出し側が渡す現在値・整形済みテキストをそのまま出力する（angle_slider.rs:230-231）。
aria-disableddisabled が true のとき tabindex="-1" と対で thumb へ付与する（angle_slider.rs:234-236）。