Slider

fandhe-frontend-pre-styled-ui の slider mod が提供するスタイル済み Slider 部品です。

Demo

min/max/step でクランプされる連続値スライダー。塗りつぶし・つまみの位置は --fandhe-slider-percent の 1 点で伝搬します。vertical では塗りつぶし・つまみ・marker がいずれも下端起点で伝搬します。

Volume

At max

Disabled

Readonly

Invalid

Vertical

Features

size/colorPalette variant クラスを root へ付与し、headless-ui の Slider 状態機械へ委譲する。
range パーツが --fandhe-slider-percent を含む style を動的値の唯一の出力点として持つ。
イシュー #2020（shadcn/ui 突合）: marker/marker_group パーツを styled 化した。marker は --fandhe-slider-marker-percent を唯一の動的値出力点として持ち、marker-group は pointer-events: none のオーバーレイコンテナとして track/thumb のクリック・ドラッグ判定を奪わない。複数 thumb（range slider）は headless-ui の構造的制約により本コンポーネント層では対応しない（意図的非採用）。
vertical（data-orientation="vertical"）では marker も bottom アンカーで位置決めされる（イシュー #2216 で Demo / Examples に可視化）。

Anatomy

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

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`palette`	`ColorPalette`	`ColorPalette::Accent`	colorPalette 軸。
`state`	`&Slider`	—	headless-ui の値状態機械。
`disabled`	`bool`	`false`	無効化状態。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード（通常 range/thumb_styled を含む）。

Data Attributes

Part	Attribute	Observed Values
`control`	`data-disabled`	（値なし）
`control`	`data-invalid`	（値なし）
`control`	`data-orientation`	`horizontal`, `vertical`
`control`	`data-readonly`	（値なし）
`label`	`data-disabled`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-readonly`	（値なし）
`marker`	`data-orientation`	`horizontal`, `vertical`
`marker`	`data-state`	`over-value`, `under-value`
`marker`	`data-value`	`0`, `100`, `50`
`range`	`data-disabled`	（値なし）
`range`	`data-invalid`	（値なし）
`range`	`data-orientation`	`horizontal`, `vertical`
`range`	`data-readonly`	（値なし）
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）
`root`	`data-orientation`	`horizontal`, `vertical`
`root`	`data-readonly`	（値なし）
`thumb`	`data-disabled`	（値なし）
`thumb`	`data-invalid`	（値なし）
`thumb`	`data-orientation`	`horizontal`, `vertical`
`thumb`	`data-readonly`	（値なし）
`track`	`data-disabled`	（値なし）
`track`	`data-invalid`	（値なし）
`track`	`data-orientation`	`horizontal`, `vertical`
`track`	`data-readonly`	（値なし）

CSS Variables

Variable	Default
`--fandhe-slider-marker-percent`	`0%`
`--fandhe-slider-percent`	`0%`
`--fandhe-slider-thumb-size`	`1.1rem`
`--fandhe-slider-track-height`	`0.375rem`
`--fandhe-slider-track-length`	`12rem`

Examples

Vertical + marker

Orientation::Vertical の Slider を渡すと control/track/range/thumb/marker が data-orientation="vertical" を出力し、recipe の vertical 状態規則で bottom アンカー配置へ切り替わる例です。marker の位置も --fandhe-slider-marker-percent を bottom から参照します（shadcn/ui に vertical 参照例は無く、本リポジトリ固有の可視化）。

Brightness