Skip to content
fandhe-frontend
GitHub

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 の 8 anatomy パーツを提供する。単一値・連続量スライダーであり `data-state` は持たない（境界区分がないため）。
  • `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">` ではないため、矢印キー操作はブラウザ標準では成立しない（クライアントランタイム側の後続責務）。
  • range slider（複数 thumb）・pointer ドラッグ・キーボード操作の DOM 配線はスコープ外（単一値スライダーのみ）。

Anatomy

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

API Reference

Arguments

NameTypeDefaultDescription
root/control/track/range(orientation)Orientation`data-orientation`（+ `control`/`track`/`range` は同名引数）を反映する。
root/control/track/range(disabled)bool`data-disabled` を反映する。
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` を追加する。
thumb(disabled)bool`true` で `tabindex="-1"` + `aria-disabled`、`false` で `tabindex="0"`。
hidden_input(name, value)&str, &strフォーム送信専用（意味論は `thumb` の `role="slider"` が担う）。

Data Attributes

PartAttributeObserved Values
controldata-orientationhorizontal
rangedata-orientationhorizontal
rootdata-orientationhorizontal
thumbdata-orientationhorizontal
trackdata-orientationhorizontal

Examples

Vertical, disabled

`Orientation::Vertical` + `disabled: true` の例。`thumb` は `tabindex="-1"` + `aria-disabled="true"` を持つ。

Brightness
70%

Accessibility

WAI-ARIA

AttributeDescription
role="slider" (thumb)WAI-ARIA slider パターン。ネイティブ `<input type="range">` ではなくカスタム `div` であり、矢印キー操作は本モジュール単体では成立しない。
aria-valuemin / aria-valuemax / aria-valuenow (thumb)常時出力する。
aria-valuetext (thumb)`Some` のときのみ出力する。