Slider

fandhe-frontend-headless-ui の slider mod が提供する単一値・連続量スライダーの unstyled 部品です。Root / Label / Control / Track / Range / Thumb / HiddenInput / ValueText の 8 anatomy パーツを持ち、value を常に step 単位へスナップしてから [min, max] へ clamp します（max/min へは常に到達可能）。data-state は持ちません（連続量のため離散的な区分がない）。

/themes/ 側の Slider（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

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

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

Demo

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

Volume

40%

Features

Root / Label / Control / Track / Range / Thumb / HiddenInput / ValueText / MarkerGroup / Marker の 10 anatomy パーツを提供する（イシュー #1621: ark-ui/zag.js との参照突合で MarkerGroup/Marker を追加）。単一値・連続量スライダーであり data-state は持たない（境界区分がないため）。
SliderProps { disabled, readonly, invalid } を root/label/control/track/range/thumb へ渡すと data-disabled/data-readonly/data-invalid を一律出力する。readonly は disabled と異なり thumb のフォーカス可能性（tabindex="0"）を変えない。
value は常に min 起点の step 単位へスナップしてから [min, max] へ clamp する。max/min ちょうどの値は step グリッドに乗らない場合でも常に到達可能（snap_to_step_and_clamp）。
thumb（div role="slider"）が WAI-ARIA slider パターンの aria-valuemin/aria-valuemax/aria-valuenow/aria-orientation を常時出力する。ネイティブ <input type="range"> ではないため、矢印キー操作はブラウザ標準では成立しない（クライアントランタイム側の後続責務）。
状態機械の dispatch 契約に "increment_large"/"decrement_large"（step の 10 倍、PageUp/PageDown・Shift+Arrow 相当）を追加した。DOM keydown 配線（Arrow/Home/End/PageUp/PageDown）自体は REQ-11 バンドルサイズ予算の都合で本イシューでは見送り、dispatch 契約の提供に留める。
range slider（複数 thumb）・pointer ドラッグの DOM 配線はスコープ外。

Anatomy

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

API Reference

Arguments

Name	Type	Default	Description
`root/label/control/track/range/thumb(props)`	`&SliderProps`	—	`data-disabled`/`data-invalid`/`data-readonly` を一律反映する。
`root/control/track/range(orientation)`	`Orientation`	—	`data-orientation`（+ `control`/`track`/`range` は同名引数）を反映する。
`thumb(orientation)`	`Orientation`	—	`aria-orientation`/`data-orientation` を反映する。
`thumb(min, max, now)`	`&str, &str, &str`	—	`aria-valuemin`/`aria-valuemax`/`aria-valuenow` として常時出力する整形済み文字列。
`thumb(aria_valuetext)`	`Option<&str>`	—	`Some` のときのみ `aria-valuetext` を追加する。
`hidden_input(name, value, disabled)`	`&str, &str, bool`	—	フォーム送信専用（意味論は `thumb` の `role="slider"` が担う）。
`marker(value, current, min, max, disabled)`	`f64, f64, f64, f64, bool`	—	`data-value`（`[min, max]` clamp 済み）+ `data-state`（"under-value"/"at-value"/"over-value"）を出力する。

Data Attributes

Part	Attribute	Observed Values
`control`	`data-orientation`	`horizontal`
`marker`	`data-orientation`	`horizontal`
`marker`	`data-state`	`over-value`, `under-value`
`marker`	`data-value`	`0`, `100`, `50`
`range`	`data-orientation`	`horizontal`
`root`	`data-orientation`	`horizontal`
`thumb`	`data-orientation`	`horizontal`
`track`	`data-orientation`	`horizontal`

Examples

Vertical, disabled

Orientation::Vertical + disabled: true の例。thumb は tabindex="-1" + aria-disabled="true" を持つ。marker（0/50/100）も同じ orientation を受けて data-orientation="vertical" を出力する（イシュー #2216）。

Brightness

70%

Readonly

readonly: true の例。thumb は tabindex="0" のままフォーカス可能で、操作抑止はクライアントランタイム側の no-op ガードが担う。

Volume (locked)

60%

Accessibility

WAI-ARIA

Attribute	Description
role="slider" (thumb)	WAI-ARIA slider パターン。ネイティブ `<input type="range">` ではなくカスタム `div` であり、矢印キー操作は本モジュール単体では成立しない。
aria-valuemin / aria-valuemax / aria-valuenow (thumb)	常時出力する。
aria-valuetext (thumb)	`Some` のときのみ出力する。
marker-group / marker	role を持たない装飾用パーツ（`crate::angle_slider::marker_group`/`marker` と同型）。操作可能な意味論を持たない。