Slider
fandhe-frontend-pre-styled-ui の slider mod が提供するスタイル済み Slider 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
min/max/step でクランプされる連続値スライダー。塗りつぶし・つまみの位置は --fandhe-slider-percent の 1 点で伝搬します。
Features
- `size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `Slider` 状態機械へ委譲する。
- `range` パーツが `--fandhe-slider-percent` を含む `style` を動的値の唯一の出力点として持つ。
Anatomy
root
label
control
track
range
thumb
hidden-inputAPI 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-orientation | horizontal |
| range | data-disabled | |
| range | data-orientation | horizontal |
| root | data-disabled | |
| root | data-orientation | horizontal |
| thumb | data-disabled | |
| thumb | data-orientation | horizontal |
| track | data-disabled | |
| track | data-orientation | horizontal |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-slider-percent | 0% |
| --fandhe-slider-thumb-size | 1.1rem |
| --fandhe-slider-track-height | 0.375rem |
| --fandhe-slider-track-length | 12rem |