HueSlider

The HueSlider follows the WAI-ARIA - Slider Pattern for accessibility.

Keyboard Navigation

Key	Description	State
ArrowRight	Increases the value based on the step value.	-
ArrowLeft	Decreases the value based on the step value.	-
ArrowUp	Increases the value based on the step value.	-
ArrowDown	Decreases the value based on the step value.	-
Home	Sets the value to min.	-
End	Sets the value to max.	-
PageUp	Increases the value based on the min and max values.	-
PageDown	Decreases the value based on the min and max values.	-

ARIA Roles and Attributes

Component	Role and Attributes	Usage
HueSliderThumb Internal	role="slider"	Indicates that this is a slider.
	aria-label	Sets "Slider thumb".
	aria-valuemin	Sets the min value. Default is 0.
	aria-valuemax	Sets the max value. Default is 360.
	aria-valuenow	Sets the current value.
	aria-valuetext	Sets the current value, such as "18°, Red".
	aria-readonly	Set to "true" if isReadOnly is set.
	aria-disabled	Set to "true" if isDisabled is set.
	aria-invalid	Set to "true" if isInvalid is set.
	aria-required	Set to "true" if isRequired is set.
input Internal	type="hidden"	Excludes the element from the accessibility tree.
	aria-readonly	Set to "true" if isReadOnly is set.
	aria-disabled	Set to "true" if isDisabled is set.
	aria-invalid	Set to "true" if isInvalid is set.
	aria-required	Set to "true" if isRequired is set.

Edit this page on GitHub