RangeSlider

RangeSliderは、ユーザーが関連する値の範囲を選択するために使用されるコンポーネントです。

RangeSliderは、アクセシビリティに関してWAI-ARIA - Slider (Multi-Thumb) Patternに従います。

Fieldsetを使用しない場合は、RangeSliderにaria-labelまたはaria-labelledbyを設定します。

<RangeSlider aria-label="Hotel Price Range" />

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    Hotel Price Range
  </Text>

  <RangeSlider aria-labelledby="label" />
</VStack>

Copied!

例えば、曜日が数値で表されており、aria-valuenowの値がユーザーフレンドリーではない場合は、aria-valuetextに"Monday"などの人間が理解可能な文字列を設定します。

const weekday = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
]

return (
  <RangeSlider getAriaValueText={(value) => weekday[value]} max={6} min={0} />
)

Copied!

キーボード操作

キー	説明	状態
`ArrowRight`	`step`の値に基づいて値を増加します。	-
`ArrowLeft`	`step`の値に基づいて値を減少します。	-
`ArrowUp`	`step`の値に基づいて値を増加します。	-
`ArrowDown`	`step`の値に基づいて値を減少します。	-
`Home`	`min`の値を設定します。	-
`End`	`max`の値を設定します。	-
`PageUp`	`min`と`max`の値に基づいて値を増加します。	-
`PageDown`	`min`と`max`の値に基づいて値を減少します。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`RangeSliderStartThumb`, `RangeSliderEndThumb`	`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"`を設定します。
	`aria-required`	`isRequired`が設定されている場合は`"true"`を設定します。
`RangeSliderMark`	`aria-hidden`	要素をアクセシビリティツリーから除外します。
`input` 内部	`type="hidden"`	要素をアクセシビリティツリーから除外します。
	`aria-readonly`	`isReadOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`isDisabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`isInvalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`isRequired`が設定されている場合は`"true"`を設定します。

GitHubでこのページを編集する

前Slider 次HueSlider