Slider
Sliderは、ユーザーが値の範囲から選択するために使用されるコンポーネントです。
Sliderは、アクセシビリティに関してWAI-ARIA - Slider Patternに従います。
FormControlを使用しない場合は、Sliderにaria-labelまたはaria-labelledbyを設定します。
<Slider aria-label="Sound volume" />
<VStack gap="sm"><Text as="h3" id="label">Sound volume</Text><Slider aria-labelledby="label" /></VStack>
例えば、曜日が数値で表されており、aria-valuenowの値がユーザーフレンドリーではない場合は、aria-valuetextに"Monday"などの人間が理解可能な文字列を設定します。
const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday",]return <Slider getAriaValueText={(value) => weekday[value]} max={6} min={0} />
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
ArrowRight | stepの値に基づいて値を増加します。 | - |
ArrowLeft | stepの値に基づいて値を減少します。 | - |
ArrowUp | stepの値に基づいて値を増加します。 | - |
ArrowDown | stepの値に基づいて値を減少します。 | - |
Home | minの値を設定します。 | - |
End | maxの値を設定します。 | - |
PageUp | minとmaxの値に基づいて値を増加します。 | - |
PageDown | minとmaxの値に基づいて値を減少します。 | - |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
SliderThumb | role="slider" | スライダーであることを示します。 |
aria-label | "Slider thumb"を設定します。 | |
aria-orientation | orientationの値に基づいて"horizontal"または"vertical"を設定します。デフォルトは"horizontal"です。 | |
aria-valuemin | minの値を設定します。デフォルトは0です。 | |
aria-valuemax | maxの値を設定します。デフォルトは100です。 | |
aria-valuenow | 現在の値を設定します。 | |
aria-valuetext | 現在の値を設定します。 | |
aria-readonly | isReadOnlyが設定されている場合は"true"を設定します。 | |
aria-disabled | isDisabledが設定されている場合は"true"を設定します。 | |
aria-invalid | isInvalidが設定されている場合は"true"を設定します。 | |
SliderMark | aria-hidden | 要素をアクセシビリティツリーから除外します。 |
input 内部 | type="hidden" | 要素をアクセシビリティツリーから除外します。 |
aria-readonly | isReadOnlyが設定されている場合は"true"を設定します。 | |
aria-disabled | isDisabledが設定されている場合は"true"を設定します。 | |
aria-invalid | isInvalidが設定されている場合は"true"を設定します。 |
GitHubでこのページを編集する