ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Slider | コンテナ要素 | — | |
| 2 | Track | 入力範囲や総量を視覚的に表現する要素 | — | |
| 3 | Indicator | 入力内容を可視化した要素 | — | |
| 4 | Thumb | トラックを移動してインジケーターを調整するためのインタラクティブなコントロール要素 | — | |
| 5 | Value | 入力内容の値を表現するテキスト要素 | — |
States: 状態
Enable
ユーザーが操作を行う前のデフォルトの状態。
Hover
ユーザーがタブにマウスオーバーしている状態。タブのスタイルを変更し、インタラクティブであることをユーザーに提示します。
Active
ユーザーがスライダーを操作している状態。タブのスタイルを変更し、操作中であることをユーザーに提示します。
Focus
ユーザーがタブ操作や、キーボードや音声による操作を用いてスライダーに注視している状態。
Disabled
システムによってスライダーが非活性化されている状態。ユーザーによる操作は不能です。
Metrics: 寸法
- Vertical Resizing: Hug
- Horizontal Resizing: Fixed
- Container Height: 16px
Contents: 内容
Do
スライダーの右側にはスライダーの入力内容を表記してください。周囲のラベルなどに単位が明示されていない場合は入力内容の単位を併記してください。また、入力形式が百分率の場合は単位にパーセント(%)を併記します。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/06/13 | ドキュメントを公開 |
小さな気づきや違和感があれば、
フィードバック